原生轮播图

作者: 哈哈腾飞 | 来源:发表于2017-06-28 09:43 被阅读0次

JavaScript | 365笔记第87天 | 原生JS做轮播
原生js制作轮播图
轮播图（2）——基于JQ的左右滑动轮播
原生轮播图
原生JS终极版-无缝轮播图
JS原生轮播图
原生轮播图实现
原生js轮播图
原生JS轮播图
原生JS轮播图

原生的轮播，能够很好的吧思维逻辑梳理清楚，更好的掌握好原生，其中的图片随便找六张就可以

效果图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    *{padding:0; margin: 0;}
    #banner{width: 989px; height: 300px; margin: 0 auto; position: relative;}
    #banner img{width: 989px; height: 300px;}
    #banner p{height: 39px; width: 989px; background-color: #000; opacity: 0.5; position: absolute; left: 0; bottom:0;}
    #banner div a{display: inline-block; width: 26px; height: 26px; border-radius:13px; background-color: #9f9f9e; color:#fff; font-weight:bold; text-decoration: none; text-align: center; line-height: 26px;}
    #banner div{position: absolute; right:400px; bottom:7px;}
    /*#banner div a:hover{background-color: #f00;}*/
    #banner div a.hov{background-color: #f00;}
    </style>
</head>
<body>
    <div id="banner">
        ![](images/banner1.png)
        <p></p>
        <div>
            <a href="#" class="hov">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">6</a>
        </div>
    </div>
     <script>
     //获取要用到的元素
      var imgEle = document.getElementById("banner").children[0];
      
      var as = document.getElementById("banner").children[2].children;
    
      // index全局变量，担任了轮播的序列数以及把下标赋值它，为了使mouseout的时候，不会再原来轮播的基础上走下标，而是在离开的位置上继续做下标
      var index = 1;
      var No = 0;
       function changeImg(){
          No = setInterval(function(){
            index++;
            if (index>6) {
                index = 1;
            }
            imgEle.src = "images/banner"+index+".png";

            changa(index-1);

          },1000)
       }
      //清除a样式封装函数
      function changa(suoyin){
        for(var i = 0; i<as.length;i++){
            as[i].className = "";
        }
        as[suoyin].className = "hov";
      }
       // 遍历所有的a标签
      for(var j = 0; j<as.length; j++){
        as[j].suoyin = j;
        as[j].onmouseover = function(){
             //鼠标移到上面首先停止定时器
              clearInterval(No);
             //只有移动到对应的数字上，有样式，其他没有样式
              changa(this.suoyin);
              //把下标赋值给index，为了mouseout 的时候，是在鼠标离开的基础上继续往后走的，而不是在它自己的原来的路径上录播
              index = this.suoyin+1;
              imgEle.src =  "images/banner"+index+".png";
        }
        //鼠标离开重新启动定时器
        as[j].onmouseout = function(){
              changeImg();
        }
      }
      changeImg();
     </script>
</body> 
</html>

只要有清晰的思路，轮播其实很轻松