轮播图实现-优快云博客

本文链接：https://blog.youkuaiyun.com/king_spunch/article/details/51779882

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>轮播图</title>
   <style>
   *{
       margin:0;
       padding:0;
   }
   #box{
       margin-top:100px;
       width:100%;
       background:#ccc url(images/0.jpg) no-repeat center top;
   }
   #pic{
       margin:0 auto;
       width:1500px;
       height:600px;
       overflow:hidden;
       position:relative;
   }
   #pic img{
       position:absolute;
       right:-600px;
       width:600px;
       height:600px;
   }
   #sLeft,#sRight{
       position:absolute;
       width:40px;
       height:60px;
       background:#333;
       display:block;
       top:250px;
       font-size:40px;
       line-height:60px;
       color:#fff;
       text-align:center;
       cursor:pointer;
   }
   #sLeft{
       left:900px;
   }
   #sRight{
       right:0;
   }
   #list{
       position:absolute;
       right:250px;
       bottom:30px;
   }
   #list li{
       float:left;
       width:20px;
       height:20px;
       border-radius:50%;
       background:red;
       margin-left:5px;
       list-style:none;
   }
   </style>
</head>
<body>
   <div id="box">
       <div id="pic">
           <img src="images/1.jpg" />
           <img src="images/2.jpg" />
           <img src="images/3.jpg" />
           <img src="images/4.jpg" />
           <span id="sLeft"><</span>
           <span id="sRight">></span>
           <ul id="list">
               <li></li>
               <li></li>
               <li></li>
               <li></li>
           </ul>
       </div>
   </div>
   <script>
   var oPic=document.getElementById('pic');
   var aImg=oPic.getElementsByTagName('img');
   var sLeft=document.getElementById('sLeft');
   var sRight=document.getElementById('sRight');
   var oList=document.getElementById('list');
   var oLi=oList.getElementsByTagName('li');//获取元素节点

   var index=0;//轮播图整个过程以全局变量index作为索引值贯穿始终

   aImg[3].style.right=0+'px';
   oLi[3].style.backgroundColor='white';//在轮播前写入一次样式，避免刷新时无图的bug；

   var Timer=setInterval(carousel,1000);//执行定时器，让图片轮播且列表当前li变颜色


   for(var j=0;j<oLi.length;j++){
       oLi[j].index=j;
       oLi[j].onclick=function(){//点击结束定时器 li背景变白，跳转到当前图片点击完毕重新执行定时器
           index=this.index;                                            //这里的index执行全局索引功能
           clearInterval(Timer);
           for(var i=0;i<aImg.length;i++){//清空效果样式
               aImg[i].style.right=-600+'px';
               oLi[i].style.backgroundColor='red';
           }
           aImg[this.index].style.right=0+'px';                 //给当前添加效果
           oLi[this.index].style.backgroundColor='white';
           Timer=setInterval(carousel,1000);                   //点击结束执行定时器
       }
   }

   sLeft.onclick=function(){
       clearInterval(Timer);
       //alert(index);
       for(var i=0;i<aImg.length;i++){                       //清空效果
           aImg[i].style.right=-600+'px';
           oLi[i].style.backgroundColor='red';
       }
       index--;                                           //   index--
       if(index<=0){                                         //索引值为0时，规定为4
           index=4;
       }
       aImg[index-1].style.right=0+'px';                   //效果
       oLi[index-1].style.backgroundColor='white';
       Timer=setInterval(carousel,1000);
   }

   sRight.onclick=function(){             //点击结束定时器跳转下一张图片，当前li变白色结束当前清空效果点击结束执行定时器
       clearInterval(Timer);
       //alert(index);
       for(var i=0;i<aImg.length;i++){
           aImg[i].style.right=-600+'px';
           oLi[i].style.backgroundColor='red';
       }
       if(index>=4){
           index=0;
       }
       index++;
       aImg[index-1].style.right=0+'px';
       oLi[index-1].style.backgroundColor='white';
       Timer=setInterval(carousel,1000);
   }

   function carousel(){
       for(var i=0;i<aImg.length;i++){//清空之前js添加的css样式（改变图片的right及li的背景色）
           aImg[i].style.right=-600+'px';
           oLi[i].style.backgroundColor='red';
       }
       if(index==4){
           index=0;
       }
       aImg[index].style.right=0+'px';//给当前的图片添加right值，使其显示
       oLi[index].style.backgroundColor='white';//给当前li添加背景白色
       index++;
   }
   </script>
</body>
</html>

最全的js轮播图效果哦