无缝轮播图的实现对比---CSS3版， JS版

概述

什么是轮播图：网页顶部自动切换图片的区域.
什么是无缝轮播图：切换图片到最后一张时，继续点击下一张，左滑至第一张，无缝衔接的感觉。
糊涂了没，直接看效果图：

http://www.bobgao.cn/#!/demo/banner2

实现思路

无缝轮播图，有几个要点：
1. 待轮播图片依次铺开，轮播区域只显示一张； (css即可完成，轮播区域overflow: hidden, position: relative; 图片列表 position: absolute)
2. 轮播边界，需要缓冲图片实现无缝衔接效果；例如总共5张图片待轮播，列表中应该放7张，顺序如下： 5123451
3. 轮播图片的过渡效果，这里有两种方式：一种纯JS实现，一种CSS3 （transition） + 部分js实现。

CSS3版

这里的css3版指的是：过渡效果用css3 transition.
在线demo: http://www.bobgao.cn/#!/demo/banner2

html

<div id="demo2" class="demo2">
  <div class="banner_wrap" ng-mouseover="stopInterval()" ng-mouseleave="startInterval()">
    <!-- 图片 -->
    <div class="photo">
      <ul class="photo_wrap">
        <div id="img_div" class="img_div" ng-class="{'img_div_pause': isPause}" style="left: -1280px;">
          <img src="css/images/demo/banner/banner5.png">
          <img src="css/images/demo/banner/banner1.png">
          <img src="css/images/demo/banner/banner2.png">
          <img src="css/images/demo/banner/banner3.png">
          <img src="css/images/demo/banner/banner4.png">
          <img src="css/images/demo/banner/banner5.png">
          <img src="css/images/demo/banner/banner1.png">
        </div>
      </ul>
    </div>
    <!-- 切换箭头 -->
    <div class="arrow">
      <!-- ie 9 -->
      <span class="left_arrow" ng-click="arrowClick(0)">&#60;</span>
      <span class="right_arrow" ng-click="arrowClick(1)">&#62;</span>
      <!-- <i class="arrow_left" ng-click="arrowClick(0)"></i> -->
      <!-- <i class="arrow_right" ng-click="arrowClick(1)"></i> -->
    </div>

    <!-- 分页图标 -->
    <div class="pagination">
      <li ng-click="pagiClick(0)">
          <span ng-class="{'page_active': isPageActiveFir}"></span>
      </li>
      <li ng-click="pagiClick(1)">
          <span ng-class="{'page_active': isPageActiveSec}"></span>
      </li>
      <li ng-click="pagiClick(2)">
          <span ng-class="{'page_active': isPageActiveTir}"></span>
      </li>
      <li ng-click="pagiClick(3)">
          <span ng-class="{'page_active': isPageActiveFou}"></span>
      </li>
      <li ng-click="pagiClick(4)">
          <span ng-class="{'page_active': isPageActiveFiv}"></span>
      </li>
    </div>
  </div>
</div>

部分css

/* banner2 */
.demo2 li{ list-style: none;}
.demo2 .banner_wrap{
  width: 100%;
  height: 371px;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  position: relative;
}
/* 图片 */
.demo2 .banner_wrap .photo{
  position: absolute;
  top: 0;
  left: 0;
  height: 371px;
  width: 100%;
  background-color: #1E1B8E;
  z-index: 1000;
}
.demo2 .banner_wrap .photo .photo_wrap{
  width: 1280px;
  height: 371px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.demo2 .banner_wrap .photo .photo_wrap .img_div{
  width: 8960px;
  height: 371px;
  position: absolute;
  z-index: 1;
  /* transform: translateX(-1280px); */
  opacity: 1;
  transition: all .6s ease-in-out;
}
.demo2 .banner_wrap .photo .photo_wrap .img_div_pause{
  transition: height .6s ease-in-out;
}
.demo2 .banner_wrap .photo .photo_wrap .img_div img{
  width: 1280px;
  height: 371px;
  float: left;
}

重要js

  /**
   * 实现动画
   */
  function animate(offset) {
    var imgDiv = document.getElementById('img_div');
    var left = parseInt(imgDiv.style.left) + offset;
    var len = 5;

    // 增加样式
    imgDiv.style.left = left + 'px';

    // 处理边界值
    if (left === 0) {
      setTimeout(function(){
        $scope.$apply(function() {
          // 先暂停， 再改样式， 最后恢复过渡效果
          $scope.isPause = true;
          imgDiv.style.left = -1280 * len + 'px';
          setTimeout(function() {
            $scope.isPause = false;
          }, 1);
        });
      }, 600);
    }
    if (left === (-1280 * (len+1) )) {
      setTimeout(function(){
        $scope.$apply(function() {
          $scope.isPause = true;
          imgDiv.style.left = '-1280px';
          setTimeout(function() {
            $scope.isPause = false;
          }, 1);
        });
      }, 600);
    }
  }

JS版

js版指的是：轮播的过渡效果用js实现。参考网上资源，demo如下：
在线demo： http://www.bobgao.cn/views/demo/banner3.html

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>焦点轮播图</title>
    <style type="text/css">
        *{ margin: 0; padding: 0; text-decoration: none;}
        body { padding: 20px;}
        #container { width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}
        #list { width: 4200px; height: 400px; position: absolute; z-index: 1;}
        #list img { float: left; width: 600px; height: 400px;}
        #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
        #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
        #buttons .on {  background: orangered;}
        .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px;  position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
        .arrow:hover { background-color: RGBA(0,0,0,.7);}
        #container:hover .arrow { display: block;}
        #prev { left: 20px;}
        #next { right: 20px;}
    </style>
    <script type="text/javascript">

        window.onload = function () {
            var container = document.getElementById('container');
            var list = document.getElementById('list');
            var buttons = document.getElementById('buttons').getElementsByTagName('span');
            var prev = document.getElementById('prev');
            var next = document.getElementById('next');
            var index = 1;
            var len = 5;
            var animated = false;
            var interval = 3000;
            var timer;


            function animate (offset) {
                if (offset == 0) {
                    return;
                }
                animated = true;
                var time = 300;
                var inteval = 10;
                var speed = offset/(time/inteval);
                var left = parseInt(list.style.left) + offset;

                console.log('speed', speed);
                console.log('left', left);

                var go = function (){
                    if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {
                        list.style.left = parseInt(list.style.left) + speed + 'px';
                        setTimeout(go, inteval);
                    }
                    else {
                        list.style.left = left + 'px';
                        if(left>-200){
                            list.style.left = -600 * len + 'px';
                        }
                        if(left<(-600 * len)) {
                            list.style.left = '-600px';
                        }
                        animated = false;
                    }
                }
                go();
            }

            function showButton() {
                for (var i = 0; i < buttons.length ; i++) {
                    if( buttons[i].className == 'on'){
                        buttons[i].className = '';
                        break;
                    }
                }
                buttons[index - 1].className = 'on';
            }

            function play() {
                timer = setTimeout(function () {
                    next.onclick();
                    play();
                }, interval);
            }
            function stop() {
                clearTimeout(timer);
            }

            next.onclick = function () {
              if (animated) {
                return;
              }
              if (index == 5) {
                index = 1;
              }
              else {
                index += 1;
              }
              console.log('index', index);
              animate(-600);
              showButton();
            }
            prev.onclick = function () {
                if (animated) {
                    return;
                }
                if (index == 1) {
                    index = 5;
                }
                else {
                    index -= 1;
                }
                animate(600);
                showButton();
            }

            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function () {
                    if (animated) {
                        return;
                    }
                    if(this.className == 'on') {
                        return;
                    }
                    var myIndex = parseInt(this.getAttribute('index'));
                    var offset = -600 * (myIndex - index);

                    animate(offset);
                    index = myIndex;
                    showButton();
                }
            }

            // container.onmouseover = stop;
            // container.onmouseout = play;

            // play();

        }
    </script>
</head>
<body>

<div id="container">
    <div id="list" style="left: -600px;">
        <img src="../../css/images/demo/banner/banner5.png" alt=""/>
        <img src="../../css/images/demo/banner/banner1.png" alt=""/>
        <img src="../../css/images/demo/banner/banner2.png" alt=""/>
        <img src="../../css/images/demo/banner/banner3.png" alt=""/>
        <img src="../../css/images/demo/banner/banner4.png" alt=""/>
        <img src="../../css/images/demo/banner/banner5.png" alt=""/>
        <img src="../../css/images/demo/banner/banner1.png" alt=""/>
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

</body>
</html>

总结

css3版优点：过渡效果好， js逻辑少；缺点： ie9以上才支持transition.
js版优点：浏览器兼容性好，整体代码比较精简；缺点：过渡效果一般， js逻辑较复杂。

欢迎学习，交流。

无缝轮播图的实现对比---CSS3版， JS版

概述

实现思路

CSS3版

JS版

总结

猜你喜欢