原生JS实现图片幻灯片效果

图片幻灯片是在网页开发中常见的一种效果，几乎是谁处可见。我今天想要实现的幻灯片的效果图如下：
这里写图片描述
它的html的代码非常的简单：

<div class="img-wrap">
  <ul>
    <li><img src="./image/aa.webp"/></li>
    <li><img src="./image/bb.jpg"/></li>
    <li><img src="./image/cc.jpg"/></li>
    <li><img src="./image/ee.webp"/></li>
  </ul>
  <div class="nav-dot">
    <span class="on"></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

我们实现幻灯片效果的原理很简单，就是通过适当地改变图片容器ul的left值，来达到图片切换的效果。
这是它的css代码：

.img-wrap {
  width: 520px;
  height: 280px;
  position: relative;
  margin: 100px auto 0;
  border: 1px solid #F00;
  overflow: hidden; /* 浏览器底部就不会有滚动条了 */
}

.img-wrap ul {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
}

.img-wrap ul li {
  list-style: none;
  float: left;
}

.img-wrap ul li img {
  display: block; /* 消除img的魔鬼间距 */
}

.nav-dot {
  font-size: 0; /* 消除inline-block自带的间距 */
  position: absolute;
  left: 50%;
  bottom: 10px;
  margin-left: -26px;
}

.nav-dot span {
  display: inline-block;
  padding-top: 8px; /* 利用padding-top的值代替高度 */
  width: 8px;
  height: 0;
  background: #fff;
  border-radius: 50%;
  margin-right: 5px;
  cursor: pointer;
}

.nav-dot span.on {
  background: #FF5000;
}

因为我们是要用js来改变ul的left值的，所以我们要给ul元素设置一个定位position： absolute。
它的js代码如下：

window.onload = function () {
  var oUl = document.querySelector('ul');
  var aLi = oUl.getElementsByTagName('li');
  var aWidth = aLi[0].offsetWidth;
  var liLen = aLi.length;
  oUl.style.width = liLen * aWidth + 'px';

  var oNavDot = document.querySelector('.nav-dot');
  var aSpan = oNavDot.querySelectorAll('span');
  for (var i = 0; i < aSpan.length; i++) {
    aSpan[i].index = i;
  }

  // 事件委托 - 利用事件冒泡机制
  oNavDot.addEventListener('click', function (e) {
    var target = e.target || e.srcElement;
    if (target.tagName == 'SPAN') {
      oUl.style.left = -aWidth * target.index + 'px';
      for (var i = 0; i < aSpan.length; i++) {
        aSpan[i].className = '';
      }
      target.className = 'on';
    }
  })

}

在js代码中，我们运用了一个js的开发技巧——事件委托。事件委托利用了事件冒泡的原理，因为子元素触发的事件会传递（冒泡）到父元素上，所以我们直接把事件处理函数绑定到父元素上，从而不用在每一个子元素上都绑定事件，减少了浏览器的dom操作，提升了页面的性能。
以上的js代码不是模块化的开发方法，现在的web应用越来越复杂了，我们都应该用模块化的思想来写代码了。这里我打算用匿名闭包IIFE模式来改造上面的代码。
IIFE(Immediately-Invoked Function Expression)，即立即执行的函数表达式，就是用一个大括号把一个匿名函数包着，然后在这个大括号里放入一个小括号在匿名函数旁边以调用这个匿名函数，最后将这一整块赋值给一个变量。IIFE可以创造一个块级的作用域，最重要的是，它是js中模块化开发的一种模式。
模块化的代码如下：

var slide = (function () {
  var module = {};

  var attr = {
    oUl: document.querySelector('ul'),
    oNavDot: document.querySelector('.nav-dot')
  };

  // 设置包裹图片的ul的宽度方法
  module.setUlWidth = function () {
    var aLi = attr['oUl'].getElementsByTagName('li');
    var aWidth = aLi[0].offsetWidth;
    var liLen = aLi.length;
    attr['oUl'].style.width = liLen * aWidth + 'px';
  };

  // 设置span的索引值(index)方法
  module.setIdx = function () {
    var aSpan = attr['oNavDot'].querySelectorAll('span');
    for (var i = 0; i < aSpan.length; i++) {
      aSpan[i].index = i;
    }
  };

  // 滑动方法
  module.slider = function () {
    // 事件委托 - 利用事件冒泡机制
    attr['oNavDot'].addEventListener('click', function (e) {
      var target = e.target || e.srcElement;
      if (target.tagName == 'SPAN') {
        attr['oUl'].style.left = -attr['oUl'].getElementsByTagName('li')[0].offsetWidth * target.index + 'px';
        for (var i = 0; i < attr['oNavDot'].querySelectorAll('span').length; i++) {
          attr['oNavDot'].querySelectorAll('span')[i].className = '';
        }
        target.className = 'on';
      }
    })
  };
  return module;
}());

window.onload = function () {
  slide.setUlWidth();
  slide.setIdx();
  slide.slider();
}

我们会发现，通过模块化的开发，js实现幻灯片的逻辑更加的清晰了。

原生JS实现图片幻灯片效果

猜你喜欢