JS 实现轮播图

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>

  <script type="text/javascript">
   window.onload=function(){
    //获取ul标签
    var imgList = document.getElementById('imglist');
    //获取所有的图片
    var imgArr = document.getElementsByTagName('img');
    //设置ul的宽度
    //一个照片520 一共有imgArr.length个
    imgList.style.width=520*imgArr.length+'px';

    //获取navDiv盒子
    var navDiv = document.getElementById('navDiv');
    //获取大盒子
    var outer = document.getElementById('outer');
    //让下面的5个暗示盒子居中
    navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+'px';
    //默认的索引
    var index = 0;
    //通过标签名获取所有的a标签
    var allA = document.getElementsByTagName('a');
    //设置默认的选中效果
    allA[index].style.backgroundColor='black';
    //为所有的超链接都绑定单击响应函数
    for(var i=0;i<allA.length;i++){
     //为每一个超链接增加一个索引函数
     allA[i].num=i;
     allA[i].onclick=function(){
      clearInterval(timer);
      //获取点击超链接的索引，并将其设置为index
      index=this.num;
//      imgList.style.left=-520*index+'px';
//      第一张   0 0
//      第二张 1 -520
//      第二张 2 -1040
     setA();
     move(imgList,"left",-520*index,20,function(){
      autoChange();
     });

     };
    }

    autoChange();

    function setA(){
     //判断当前索引是否是最后一张
     if(index >= imgArr.length-1){
//      则将index设为0
      index=0;
      //此时显示的是最后一张和第一张一模一样
      //通过css将最后一张切换为第一张
      imgList.style.left=0;
     }


     for(var i=0;i<allA.length;i++){
      //遍历所有的a,并将他们的背景颜色设置为红色
      allA[i].style.backgroundColor="";
     }
      //选中的a背景颜色为黑色
      allA[index].style.backgroundColor="black";
    }

    var timer;
    //创建一个函数，用来开启自动切换图片
    function autoChange(){
     //开启定时器，用来定时切换图片
     timer=setInterval(function(){
      //索引自增
      index++;
      //判断index值
      index%=imgArr.length;
      move(imgList,"left",-520*index,20,function(){
       setA();
      });
     },3000);
    }

  }
  </script>

  <script type="text/javascript" src="js/tools.js"></script>
  <style type="text/css">

   *{
    margin: 0;
    padding: 0;
   }
   /*
    * 设置outer的样式
    */
   #outer{
    /*
     * 设置宽和高
     */
    width:520px;
    height:500px;
    /*
     * 居中
     * 50px 向下一50px
     */
    margin: 50px auto;
    background-color: #7FFFD4;
    padding: 10px 0;
    position: relative;
    overflow: hidden;
   }

   /*
    * 设置imglist
    */
   #imglist{
    /*去除项目符号*/
    list-style: none;
    position: absolute;
    left: -520;

   }
   /*设置图片中的li*/
   #imglist li{
    /*设置浮动*/
    float: left;
    margin: 0 10px;
   }
   #navDiv{
    bottom: 15px;
    position: absolute;
   }
   #navDiv a{
    float: left;
    width: 15px;
    height: 15px;
    background: red;
    margin: 0 5px;
    opacity: 0.5;
    filter: alpha(opacity :50);
   }
   #navDiv a:hover{
    background-color: black;
   }
  </style>

</head>
<body>
  
  <div id="outer">
   
   <ul id="imglist">
    <li><img src="img/1.jpg" /></li>
    <li><img src="img/2.jpg" /></li>
    <li><img src="img/3.jpg" /></li>
    <li><img src="img/4.jpg" /></li>
    <li><img src="img/5.jpg" /></li>
    <li><img src="img/1.jpg" /></li>
   </ul>


   <div id="navDiv">
    <a href="javascript: ;"></a>
    <a href="javascript: ;"></a>
    <a href="javascript: ;"></a>
    <a href="javascript: ;"></a>
    <a href="javascript: ;"></a>
   </div>
  </div>
</body>
</html>

猜你喜欢