JS中的轮播图

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>图片轮播</title>
	<style type="text/css">
		#box{width: 590px;height: 470px;margin:50px auto;position: relative;}
		#content div{display: none}
		#content div.sel{display: block;}
		#box-arrow{position: absolute;top:50%;transform: translateY(-50%);width: 100%}
		#box-arrow .arrow{width: 26px;height: 26px;background: rgba(0,0,0,0.5);padding: 2px;}
		#box-arrow .al{float: left;}
		#box-arrow .ar{float: right;}
		#box .cus{position: absolute;bottom:15px;left: 50%;transform: translateX(-50%);}
		#box .cus li{list-style-type: none;width: 10px;height: 10px;border: 1px solid #fff;border-radius: 50%;float: left;margin-right: 10px;}
		#box .cus li.current{background: #fff}

	</style>
</head>
<body>
	<div id="box">
		<div id="content">
			<div class="sel"><img src="images/l1.jpg"></div>
			<div><img src="images/l2.jpg"></div>
			<div><img src="images/l3.jpg"></div>
			<div><img src="images/l4.jpg"></div>
		</div>
		<div id="box-arrow">
			<img class="arrow al" src="images/arrow-left.png">
			<img class="arrow ar" src="images/arrow-right.png">
		</div>
		<ul class="cus">
			<li class="current"></li>
			<li></li> 
			<li></li>
			<li></li>
		</ul>
	</div>

	<script type="text/javascript">
		//1.自动轮播
		var ds=document.getElementById('content').getElementsByTagName('div');
		var index=0;
		var len=ds.length; 
		var t;
		var o=document.getElementById('box');
		var arrows=document.getElementsByClassName('arrow');
		t=setInterval(moveNext,1000);

		//显示下一张
		function moveNext(){
			//当前显示的置为不显示
			ds[index].className='';
			lis[index].className='';
			index++;//索引增加
			if (index==len) {
				index=0;
			}
			//下一张显示
           ds[index].className='sel';
           lis[index].className='current';
		}
		function movePre(){
			//当前显示的置为不显示
			ds[index].className='';
			lis[index].className='';
			index--;//索引增加
			if (index==-1) {
				index=len-1;
			}
			//下一张显示
           ds[index].className='sel';
           lis[index].className='current';
		}
		//2.鼠标进入，停止轮播
		o.onmouseenter=function(){
			this.style.cursor="pointer";
            clearInterval(t);
		}
		//3.鼠标离开，继续轮播
		o.onmouseleave=function(){
			t=setInterval(moveNext,1000);
		}
		//4.箭头轮播
		for(var i=0;i<arrows.length;i++){
			arrows[i].onmouseenter=function(){
				this.style.background='rgba(0,0,0,0.6)';
			}
			arrows[i].onmouseleave=function(){
				this.style.background='rgba(0,0,0,0.5)';
			}
		}
		//左箭头
		arrows[0].onclick=function(){
			movePre();
		};
		//右箭头
		arrows[1].onclick=function(){
            moveNext();
		};
		//5.指示器
		var lis=document.getElementsByClassName('cus')[0].getElementsByTagName('li');
		//为指示器添加点击事件
		for(var j=0;j<len;j++){
			lis[j]._index=j;

			lis[j].onclick=function(){
				lis[index].className='';
				ds[index].className='';
				// console.log(index);
				this.className='current';
				ds[this._index].className='sel';
				index=this._index;//修改index的值
			}
		}
	</script>
</body>
</html>
猜你喜欢
