常见网页特效案例：网页轮播图

常见网页特效案例：网页轮播图

轮播图也称为焦点图，是网页中比较常见的网页特效。

功能需求：

​ 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。

​ 2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。

​ 3.图片播放的同时，下面小圆圈模块跟随一起变化。

​ 4.点击小圆圈，可以播放相应图片。

​ 5.鼠标不经过轮播图，轮播图也会自动播放图片。

​ 6.鼠标经过，轮播图模块， 自动播放停止。

效果：

代码：

• js部分

document.addEventListener('DOMContentLoaded', function() {
    // 封装的动画函数 动画对象obj（obj要有定位）  移动的目标举例target ，返回函数callback;
    function animation(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);
                //简写利用&& 的短路          
                callback && callback();
            }
            var flag = (target - obj.offsetLeft) / 10;
            var step = flag > 0 ? Math.ceil(flag) : Math.floor(flag);
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 30);
    }
    //获取节点
    var focus = document.querySelector('.focus');
    var focus_l = focus.querySelector('.focus_l');
    var focus_r = focus.querySelector('.focus_r');
    var pic_ul = focus.querySelector('.pic_ul');
    var pic_ol = document.querySelector('.focus_ol');
    //焦点图的第一张的最后一张图是一样的，直接克隆节点
    var pic_li = pic_ul.children[0].cloneNode(true);
    pic_ul.appendChild(pic_li);
    var circle = 0;
    for (var i = 0; i < pic_ul.children.length - 1; i++) {
        var ol_li = document.createElement('li');
        pic_ol.appendChild(ol_li);
        pic_ol.children[i].setAttribute('index', i);
        // 点击小圆圈，可以播放相应图片。
        pic_ol.children[i].addEventListener('click', function() {
            for (var i = 0; i < pic_ol.children.length; i++) {
                pic_ol.children[i].className = '';
            }
            this.className = 'current';
            num = this.getAttribute('index')
            circle = this.getAttribute('index');
            animation(pic_ul, -this.getAttribute('index') * focus.offsetWidth);
        })
    }
    // 鼠标不经过轮播图，轮播图也会自动播放图片 
    var time = setInterval(function() {
        focus_r.click();
    }, 4000);
    // 未点击小圆圈 ，默认选择给第一个加样式
    pic_ol.firstElementChild.className = 'current';
    //1.鼠标经过轮播图模块，左右按钮显示
    focus.addEventListener('mouseenter', function() {
        focus_l.style.display = 'block';
        focus_r.style.display = 'block';
        clearInterval(time); //鼠标经过，轮播图模块， 自动播放停止。
        time = null;
    });
    //1.鼠标经过轮播图模块，离开隐藏左右按钮。
    focus.addEventListener('mouseleave', function() {
        focus_l.style.display = 'none';
        focus_r.style.display = 'none';
        time = setInterval(function() {
            focus_r.click();
        }, 4000);
    });
    var num = 0;
    var flags = true; //节流阀 防止连续点击，造成轮播速度过快
    //.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。
    focus_r.addEventListener('click', function() {
        if (flags) {
            flags = false;
            if (num == pic_ul.children.length - 1) {
                num = 0;
                pic_ul.style.left = '0px';
            };
            num++;
            animation(pic_ul, -num * focus.offsetWidth, function() {
                flags = true;
            });
            circle++;
            if (circle == pic_ol.children.length) {
                circle = 0;
            }
            for (var i = 0; i < pic_ol.children.length; i++) {
                pic_ol.children[i].className = '';
            }
            pic_ol.children[circle].className = 'current';
        }
    });
    focus_l.addEventListener('click', function() {
        if (flags) {
            flags = false;
            if (num == 0) {
                num = pic_ul.children.length - 1;
                pic_ul.style.left = -num * focus.offsetWidth + 'px';
            }
            num--;
            animation(pic_ul, -num * focus.offsetWidth, function() {
                flags = true;
            });
            circle--;
            if (circle < 0) {
                circle = pic_ol.children.length - 1;
            }
            for (var i = 0; i < pic_ol.children.length; i++) {
                pic_ol.children[i].className = '';
            }
            pic_ol.children[circle].className = 'current';
        }
    });
})

• html部分

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>网页轮播图---焦点图</title>
      <!-- 引入css文件 -->
      <link rel="stylesheet" href="css/demo.css">
      <!-- 引入js文件 -->
      <script src="js/demo.js"></script>
  </head>
  <body style="background-color: #CCC;">
      <h1>网页轮播图---焦点图</h1>
      <div class="focus">
          <a href="javascript:;" class="focus_l">
              &lt; </a>
          <a href="javascript:;" class="focus_r"> &gt;</a>
          <ul class="pic_ul">
              <li>
                  <a href="#"><img src="upload/pic1.webp" alt=""></a>
              </li>
              <li>
                  <a href="#"><img src="upload/pic2.webp" alt=""></a>
              </li>
              <li>
                  <a href="#"><img src="upload/pic3.webp" alt=""></a>
              </li>
              <li>
                  <a href="#"><img src="upload/pic4.jpg" alt=""></a>
              </li>
              <li>
                  <a href="#"><img src="upload/pic5.jpg" alt=""></a>
              </li>
              <li>
                  <a href="#"><img src="upload/pic6.webp" alt=""></a>
              </li>
  
          </ul>
          <ol class="focus_ol">
          </ol>
      </div>
  </body>
  
  </html>
  

• css部分

  a {
      text-decoration: none;
  }
  
  h1 {
      text-align: center;
  }
  
  ul,
  ol {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  .focus {
      position: relative;
      width: 590px;
      height: 470px;
      margin: 50px auto;
      background-color: pink;
      overflow: hidden;
  }
  
  .focus_l,
  .focus_r {
      display: none;
      position: absolute;
      top: 50%;
      width: 40px;
      height: 40px;
      color: white;
      background-color: rgba(0, 0, 0, .3);
      font-size: 20px;
      z-index: 1;
      line-height: 40px;
      text-align: center;
      transform: translateY(-50%);
  }
  
  .focus_l {
      left: 0;
      border-radius: 0 50% 50% 0;
  }
  
  .focus_r {
      right: 0;
      border-radius: 50% 0 0 50%;
  }
  
  .focus_ol {
      position: absolute;
      bottom: 20px;
      left: 100px;
  }
  
  .focus_ol li {
      float: left;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-right: 5px;
      cursor: pointer;
      border: 3px solid #fff;
  }
  
  .pic_ul {
      position: relative;
      height: 100%;
      width: 20000px;
  }
  
  .pic_ul li {
      height: 100%;
      float: left;
  }
  
  .pic_ul img {
      height: 100%;
  }
  
  .current {
      background-color: #FFF;
  }