web前端必学功法之一：轮播图

web前端必学功法之一：轮播图

效果演示:

<style>
      * {
            margin: 0;
            padding: 0;
      }

      /* 去除a标签的下划线 */
      a {
            text-decoration: none;
      }

      .container {
            position: relative;
            width: 600px;
            height: 400px;
            margin: 100px auto 0 auto;
            box-shadow: 0 0 5px mediumpurple;
            overflow: hidden;

      }

      .wrap {
            position: absolute;
            width: 4200px;
            height: 400px;
            z-index: 1;
      }

      .container .wrap img {
            float: left;
            width: 600px;
            height: 400px;
      }

      .container .buttons {
            position: absolute;
            right: 150px;
            bottom: 20px;
            width: 200px;
            height: 10px;
            z-index: 2;
      }

      .container .buttons span {
            margin-left: 5px;
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            border-radius: 50px;
            background-color: mediumslateblue;
            color: white;
            cursor: pointer;
            text-align: center;
      }

      .container .buttons span.on {
            background-color: red;
      }

      .container .arrow {
            position: absolute;
            top: 36%;
            color: mediumpurple;
            padding: 0 12px;
            border-radius: 50%;
            font-size: 50px;
            z-index: 2;
      }

      .container .arrow_left {
            left: 10px;
      }

      .container .arrow_right {
            right: 10px;
      }

      .container .arrow:hover {
            background-color: rgba(0, 0, 0, 0.3);
      }
</style>

      <div class="container">
            <!-- 图片区域 -->
            <div class="wrap" style="left:-600px;">
                  <img src="img/1.jpg" />
                  <img src="img/2.jpg" />
                  <img src="img/3.jpg" />
                  <img src="img/4.jpg" />
                  <img src="img/5.jpg" />
                  <img src="img/6.jpg" />
                  <img src="img/7.jpg" />

            </div>
            <!-- 圆点 -->
            <div class="buttons">
                  <span id="1">1</span>
                  <span id="2">2</span>
                  <span id="3">3</span>
                  <span id="4">4</span>
                  <span id="5">5</span>
                  

            </div>
            <!-- 左右控制按钮 -->
            <a href="javascript:void(0)" class="arrow arrow_left" onclick="preImg()">&lt;</a>
            <a href="javascript:void(0)" class="arrow arrow_right" onclick="nextImg()">&gt;</a>
      </div>

      <script>
            var wrap = document.querySelector(".wrap");

            var newLeft;

            //  上一张
            function preImg() {
                  //   判断当前图片是否为最后一张
                  if (wrap.style.left === "-3600px") {
                        newLeft = -1200;   //是为最后一张就回到最前面一张
                     
                  } else {
                        newLeft = parseInt(wrap.style.left) - 600  //不是就到上一张,因为当前wrap.style.left值是个字符串，所以就需要parseInt()
                  }
                  wrap.style.left = newLeft + "px";   // 新位置的值

                  index--;    //上一张，每次图标就减去1
                  if(index < 0){     //index最小为0
                        index = 4;
                  }
                  showCurrentDot();
            }

            //  下一张
            function nextImg() {
                  //   判断当前图片是否为最后一张
                  if (wrap.style.left === "0px") {
                        newLeft = -2400;   //是为最后一张，就回到第一张
                  } else {
                        newLeft = parseInt(wrap.style.left) + 600  //不是第一张就继续下一张,因为当前wrap.style.left值是个字符串，所以就需要parseInt()
                  }
                  wrap.style.left = newLeft + "px";   // 新位置的值

                  index++;    //下一张，每次图标就加1
                  if(index > 4){     //index大于4 ，说明到了最后一张
                        index = 0;
                  }
                  showCurrentDot();
            }

            // 自动播放
            var  timer;
            function  autoPlay(){
                  //定时两秒执行一次，下一章 方法调用
                     timer = setInterval(function(){
                           nextImg(); 
                     },2000)
            }
            autoPlay();
            
            // 鼠标悬停时，停止图片轮播
               
            //   找到当前容器，绑定一个onmouserover
            document.querySelector(".container").onmouseover = function(){
                    //清除定时任务
                    clearInterval(timer);
            }

            //鼠标离开时，开始轮播图片

            document.querySelector(".container").onmouseleave = function(){
                   //自动播放
                   autoPlay();
            }
           
            //显示小圆点
            var index = 0;
            var  dots = document.getElementsByTagName("span");  //获取所有的小圆点
            function showCurrentDot(){
                     for(var  i = 0; i < dots.length; i++){
                            //设置圆点不选中
                            dots[i].className = "";
                     }
                     //将当前所在位置的图片对应的小圆点选中

                     dots[index].className = "on";

            }
            showCurrentDot();

            //点击小圆点事件

            for(var i = 0; i< dots.length; i++){
                    //绑定点击事件
                    dots[i].onclick = function(){
                            //获取点击的圆点的位置(id属性值)

                            var  dis = this.id;
                            
                            //设置wrap的left值
                            wrap.style.left = -(dis * 600) + "px";

                            //设置红点位置

                            index = dis - 1;   //dis是从1开始的，但是索引是从0开始的，所以要减少1
                            showCurrentDot();

                    }
            }
      </script>

轮播图总结

      1.这里使用5个小圆点，用7张图片来轮播，是为了实现无缝轮播，这样看起来效果比较好一点
      2.它的原理：就是将图片在一行中进行平铺，把所有的图片平铺在页面中，然后进行计算偏移量，再利用定时器，定时轮播
      3.布局很重要。是成功的第一步。