banner 图轮播 CSS+JS特效

banner 

 
<style>

.jd-banner {
  position: relative;
  overflow: hidden;
  width: 800px;
  height: 450px;
}
.jd-banner .previousBtn {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: rgba(210, 210, 210, 0.4);
  border-radius: 50%;
  transform: translateY(-50%);
  top: 50%;
  left: 12px;
}
.jd-banner .previousBtn span {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background-position: -22px 0px;
}
.jd-banner .previousBtn:hover {
  border: 1px solid #fff;
  background-color: transparent;
}
.jd-banner .nextBtn {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: rgba(210, 210, 210, 0.4);
  border-radius: 50%;
  transform: translateY(-50%);
  top: 50%;
  right: 12px;
}
.jd-banner .nextBtn span {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background-position: -22px 0px;
  transform: scaleX(-1);/*镜像*/
}
.jd-banner .nextBtn:hover {
  border: 1px solid #fff;
  background-color: transparent;
}
.jd-banner ul {
  width: 1000%;
  -webkit-transform: translateX(-10%);
  transform: translateX(-10%);
}
.jd-banner ul li {
  width: 10%;
  float: left;
}
.jd-banner ul li img {
  width: 100%;
  height: 100%;
}
.jd-banner ol {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
}
.jd-banner ol li {
  float: left;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #fff;
  margin: 0 4px;
}
.jd-banner ol .current {
  background-color: #fff;
}

</style>

 <!-- 轮播图 -->
    <div class="jd-banner">
      <ul class="clearfix">
        <!-- 注意: 由于移动是可以左右滑动的, 所以需要两张假图片，为了动画过渡自然-->
        <li><a href="#"><img src="https:// /themes/xz-base/img/banner-1-3.jpg" alt=""></a></li>
        <li><a href="#"><img src="https:// /themes/xz-base/img/banner-1-1.jpg" alt=""></a></li>
        <li><a href="#"><img src="https:// t/themes/xz-base/img/banner-1-2.jpg" alt=""></a></li>
        <li><a href="#"><img src="https:// /themes/xz-base/img/banner-1-4.jpg" alt=""></a></li>
 
      </ul>
      <div class="previousBtn">
      <!--jd-sprites：添加的精灵图图标，可自行添加箭头-->
        <span class="jd-sprites"></span>
      </div>
      <div class="nextBtn">
        <span class="jd-sprites"></span>
      </div>
      <!--轮播点-->
<!--       <ol>
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
 
      </ol> -->
    </div>

<script type="text/javascript">

   (function bannerToggle() {
    var banner = document.querySelector('.jd-banner')
    var ul = banner.querySelector('.jd-banner ul'); //获取ul
    var olLis = document.querySelectorAll('.jd-banner ol li')//获取小圆点
    var previousBtn = document.querySelector('.previousBtn')
    var nextBtn = document.querySelector('.nextBtn')

    var length = ul.children.length
    // 前面有张假图片，因此index=1
    var index = 1
    var width = banner.offsetWidth

    nextBtn.onclick = function () {
      nextImg()
    }
    previousBtn.onclick = function () {
      previousImg()
    }
    /* 切换到下一张图 */
    function nextImg() {
      index++
      addAnimation()
      moveImg(-index * width)
    }
    /* 切换到上一张图 */
    function previousImg() {
      index--
      addAnimation()
      moveImg(-index * width)
    }
    /*transitionend事件：过渡完成后触发 */
    ul.addEventListener('transitionend', function () {
      // 往左跑的判断, 当抵达最后一张假图时, 需要瞬间跳到第一张真图的位置
      if (index >= length - 1) {
        index = 1
        removeAnimation()
        moveImg(-index * width)
      }
      // 往右跑的判断, 当抵达第一张假图的时候, 应该瞬间跳转到最后一张真图(图8的位置)
      if (index <= 0) {
        index = length - 2
        removeAnimation()
        moveImg(-index * width)
      }
      location()
    })

    /**封装的一些小方法 */
    /*排他思维,添加小圆点*/
    // function location() {
    //   olLis.forEach(function (item, index) {
    //     item.classList.remove('current')
    //   })
    //   olLis[index - 1].classList.add('current')
    // }
    /*图片移动 */
    function moveImg(x) {
      ul.style.transform = 'translateX(' + x + 'px)'
    }
    /*移除动画 */
    function removeAnimation() {
      ul.style.transition = 'none'//移除过渡
    }
    /*添加动画 */
    function addAnimation() {
      ul.style.transition = 'all .4s'//添加过渡
    }
    /*自动播放 */
    var timerId = null
    function autoPlay() {
      timerId = setInterval(nextImg, 5000)
    }
    autoPlay()
    /*鼠标移入停止播放 */
    banner.onmouseenter = function () {
      clearInterval(timerId)
    }
    /*鼠标移出开始播放 */
    banner.onmouseleave = function () {
      autoPlay()
    }
    

    // 如果屏幕大小变换了, width 需要动态更新
    // resize: 屏幕大小改变时触发
    window.addEventListener("resize", function () {
      // 重新获取 li 的宽度即可
      width = banner.offsetWidth;
    })
  })()

</script>