图片轮播的实现（html js）

1.简单实现

1）实现思想：通过轮播次数来决定显示那一张首先，可以用简单的div 包含img的框架来实现，我们为他添加按钮，每个按钮对应不同的图片，那么，每点击一次，将要显示的图片的style.dispay属性设置为'block'将不显示的图片的display设置为none，可以实现简单的按钮点击实现轮播，再者，我们可以利用间歇调用setInterval()方法来实现自动轮播

2）算法的实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	div{
		height:100px;

	}
	div >img{
		width:500px;
		height:500px;
		display: block;
	}
</style>
<body>
	<button>显示1</button>
	<button>显示2</button>
	<button>显示3</button>
	<button>显示4</button>
	<div>
	<img src="../iamges/1.jpg" alt="">
	<img src="../iamges/1.jpg" alt="">
	<img src="../iamges/1.jpg" alt="">
	<img src="../iamges/1.jpg" alt="">
	<img src="../iamges/1.jpg" alt="">
	</div>
</body>
</html>

如以上代码所示，为html的写法

以下为button绑定事件，js实现轮播

<script>
	window.onload =function(){
		var btns= document.getElementsByTagName('button');
		function change(){
			for(var i =0 ; i<imgs.length;i++){
				imgs[i].style.display ='none';
			}img[0].style.display ='block';
			}
		btns[0].onclick =change;
	}
</script>

此为一个点击事件的实现，其他的类似。

当然，实现了点击轮播之后，我们需要为他添加自动轮播，利用setInterval（）方法，

var count=0;
  setInterval(function(){
		for(var i =0 ; i<imgs.length;i++){
			imgs[i].style.display ='none';
		}
		var index =count%imgs.length;
		img[count].style.display ='block';
		count++;
  },5000);

注意，代码中声明index 变量的用意在于，我们发现，第一次循环的时候，i==conut，但是，随着count的递增，i值没有与之相对应的，那么，第二次轮播，将无法实现。所以为count取余以后，count 0 1 2 3 4 5
index 0 1 2 0 1 2

由此实现简单的轮播。注：代码中丢失对于images元素的获取，可自行添加。

图片轮播的实现（html js）

1.简单实现

猜你喜欢