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

来源：互联网发布：有哪些视频剪辑软件编辑：程序博客网时间：2024/06/05 16:56

概述

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

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逻辑较复杂。

欢迎学习，交流。

阅读全文

1 0