javascript图片轮播

深碍√TFBOYSˉ_ 2022-05-12 02:44 310阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    	
    		*{padding: 0px;margin: 0px;}
    		#container{width: 520px;height: 280px;margin: 50px auto;position: relative;}
    		#content div{display: none;}
    		#content div.current{display: block;}
    		#a1{position: absolute;top: 50%;margin-top: -16px;width: 100%;}
    		#a1 div{display: none;}
    		#a1 .arrow{background: rgba(0,0,0,0.3);}
    		#a1 .arrow:hover{cursor: pointer;}
    		#a1 .arrow-left{float: left;}
    		#a1 .arrow-right{float: right;}
    
    		ol ,li{list-style: none;}
    		#cus{position: absolute;bottom: 15px;left: 50%;margin-left: -26px;width: 90px;
    			background: rgba(255,255,255,0.7);height: 15px;text-align: center;line-height: 15px;
    			border-radius: 15px;}
    		#cus li{float: left;width: 10px;height: 10px;border: 1px solid gray;border-radius: 50%;
    			margin-right: 6px;margin-top: 2px;}
    		#cus li:first-child{margin-left: 15px;}
    		#cus li:hover{cursor: pointer;}
    		#cus li.sel{background: orange;border-color: orange;}
    	</style>
    	</style>
    </head>
    <body>
    <div id="container">
    	<div id="content">
    		<div class="current"><img src="images/01.jpg" alt=""></div>			
    		<div><img src="images/02.jpg" alt=""></div>
    		<div><img src="images/03.jpg" alt=""></div>
    		<div><img src="images/04.jpg" alt=""></div>
    	</div>
    	
    		<ol id="cus">
    			<li class="sel"></li>
    			<li></li>
    			<li></li>
    			<li></li>
    		</ol>
    		
    	<div id="a1">
    			<div class="arrow arrow-left"><img src="images/arrow-left.png" alt=""></div>
    			<div class="arrow arrow-right"><img src="images/arrow-right.png" alt=""></div>
    	</div>
    </div>
    
    
    
    <script type="text/javascript">
    //查找元素
    var ds=document.getElementById('content').getElementsByTagName('div');
    var o=document.getElementById('container');//轮播区
    var arrows=document.getElementsByClassName('arrow');
    var lis=document.getElementById('cus').getElementsByTagName('li');
    var index=0;//保存当前显示的索引；
    var len=ds.length//图片的个数
    //自动轮播
    var t=setInterval(move,1000);
    //鼠标经过事件
    o.onmouseover=function () {
    	clearInterval(t)//停止轮播
        arrows[0].style.display='block';
        arrows[1].style.display='block'
    }
    //鼠标离开事件;
    o.onmouseout=function () {
    	t=setInterval(move,1000);//启动定时器
    	arrows[0].style.display='none'
    	arrows[1].style.display='none'
    };
    //箭头轮播
    //右箭头
    arrows[1].onclick=function () {
    	move()
    };
    //左箭头
    arrows[0].onclick=function () {
    	movepre()
    };
    //指示器点击事件;
    for(var i=0;i<lis.length;i++){
    	lis[i]._index=i;//遍历时为每个li新增属性index,并赋值
        lis[i].onclick=function () {
        lis[index].className='';//清除当前指示器的样式;
        ds[index].className=''//当前显示的轮播图，不显示
        this.className='sel';//修改被点击的指示器的样式;
        ds[this._index].className='current'//指示器被选中时对应的轮播图显示；
        index=this._index;//修改index
      };
    }
    
    
    //图片切换下一张
    function move() {
        //当前显示的轮播图，停止显示
       ds[index].className='';
       lis[index].className=''
        index++;//索引递增
    
       if (index==len) {
       	index=0//图片最后一张时切换到第一张
       }
       ds[index].className='current';//显示的下一张	
       lis[index].className='sel'//跟随显示的下一个指示器
    }
    //图片上一张；
    function movepre() {
      ds[index].className='';
      lis[index].className=''
      index--;
      if (index==-1) {
      	index=len-1;//
      	//图片第一张时切换为最后一张
    
      }
      ds[index].className='current'//显示上一张
       lis[index].className='sel'//跟随显示的下一个指示器
    }
    
    </script>	
    </body>
    </html>