[关闭]
@EncyKe 2016-05-09T02:19:00.000000Z 字数 7099 阅读 4394

JS：图片展示（焦点图片轮播）

JavaScript 前端

一、JS原生方法

HTML部分

  1. <div id="container">
  2.     <div id="list" style="left: -600px;">
  3.         <img src="img/5.jpg" alt="1"/>
  4.         <img src="img/1.jpg" alt="1"/>
  5.         <img src="img/2.jpg" alt="2"/>
  6.         <img src="img/3.jpg" alt="3"/>
  7.         <img src="img/4.jpg" alt="4"/>
  8.         <img src="img/5.jpg" alt="5"/>
  9.         <img src="img/1.jpg" alt="5"/>
  10.     </div>
  11.     <div id="buttons">
  12.         <span index="1" class="on"></span>
  13.         <span index="2"></span>
  14.         <span index="3"></span>
  15.         <span index="4"></span>
  16.         <span index="5"></span>
  17.     </div>
  18.     <a href="javascript:;" id="prev" class="arrow">&lt;</a>
  19.     <a href="javascript:;" id="next" class="arrow">&gt;</a>
  20. </div>

CSS部分

  1. /* reset */
  2. *{ 
  3.     margin: 0; 
  4.     padding: 0; 
  5.     text-decoration: none;
  6. }
  7. body { 
  8.     padding: 20px;
  9. }
  11. /* 外部大容器 */
  12. #container { 
  13.     width: 600px; 
  14.     height: 400px; 
  15.     border: 3px solid #333; 
  16.     overflow: hidden; 
  17.     position: relative;
  18.     margin: 0 auto;
  19. }
  20. /* 列表容器 */
  21. #list { 
  22.     width: 4200px; 
  23.     /* 7张宽600px的图 */
  24.     height: 400px; 
  25.     position: absolute; 
  26.     z-index: 1;
  27. }
  28. #list img { 
  29.     float: left;
  30. }
  32. /* 圆点小按钮容器 */
  33. #buttons { 
  34.     position: absolute; 
  35.     height: 10px; 
  36.     width: 100px; 
  37.     z-index: 2; 
  38.     bottom: 20px; 
  39.     left: 250px;
  40. }
  41. /* 圆点小按钮 */
  42. #buttons span { 
  43.     cursor: pointer; 
  44.     float: left; 
  45.     border: 1px solid #fff; 
  46.     width: 10px; 
  47.     height: 10px; 
  48.     border-radius: 50%; 
  49.     background: #333; 
  50.     margin-right: 5px;
  51. }
  52. /* 圆点小按钮激活状态 */
  53. #buttons .on { 
  54.     background: orangered;
  55. }
  57. /* 箭头 */
  58. .arrow { 
  59.     cursor: pointer; 
  60.     display: none; 
  61.     line-height: 39px; 
  62.     text-align: center; 
  63.     font-size: 36px; 
  64.     font-weight: bold; 
  65.     width: 40px; 
  66.     height: 40px; 
  67.     position: absolute; 
  68.     z-index: 2; 
  69.     top: 180px; 
  70.     background-color: RGBA(0,0,0,.3); 
  71.     color: #fff;
  72. }
  73. .arrow:hover { 
  74.     background-color: RGBA(0,0,0,.7);
  75. }
  76. #container:hover .arrow { 
  77.     display: block;
  78. }
  79. #prev { 
  80.     left: 20px;
  81. }
  82. #next { 
  83.     right: 20px;
  84. }

JS部分

  1. window.onload = function () {
  2.     var container = document.getElementById('container');
  3.     var list = document.getElementById('list');
  4.     var buttons = document.getElementById('buttons').getElementsByTagName('span');
  5.     var prev = document.getElementById('prev');
  6.     var next = document.getElementById('next');
  7.     var index = 1;
  8.     var len = 5;
  9.     var animated = false;
  10.     var interval = 3000;
  11.     var timer;
  13.     // 封装点击箭头时两向滑动的函数；
  14.     function animate (offset) {
  15.         if (offset == 0) {
  16.             return;
  17.         }
  18.         animated = true;
  19.         // 位移持续时间；
  20.         var time = 300;
  21.         // 位移间隔时间；
  22.         var inteval = 50;
  23.         // 每次位移量；
  24.         var speed = offset/(time/inteval);
  25.         var left = parseInt(list.style.left) + offset;
  27.         var go = function (){
  28.             // 判断是否需要作位移；
  29.             if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {
  30.                 list.style.left = parseInt(list.style.left) + speed + 'px';
  31.                 // 递归自身以实现位移动画；
  32.                 setTimeout(go, inteval);
  33.             }
  34.             else {
  35.                 list.style.left = left + 'px';
  36.                 // 判断是否在1或5，超出时归位重置；
  37.                 if(left>-200){
  38.                     list.style.left = -600 * len + 'px';
  39.                 }
  40.                 if(left<(-600 * len)) {
  41.                     list.style.left = '-600px';
  42.                 }
  43.                 animated = false;
  44.             }
  45.         }
  46.         go();
  47.     }
  49.     // 小圆点切换功能函数；
  50.     function showButton() {
  51.         // 重置所有按钮；
  52.         for (var i = 0; i < buttons.length ; i++) {
  53.             if( buttons[i].className == 'on'){
  54.                 buttons[i].className = '';
  55.                 break;
  56.             }
  57.         }
  58.         buttons[index - 1].className = 'on';
  59.     }
  61.     // 自动播放函数；
  62.     function play() {
  63.         timer = setTimeout(function () {
  64.             prev.onclick();
  65.             play();
  66.         }, interval);
  67.     }
  68.     // 停止自动播放函数；
  69.     function stop() {
  70.         clearTimeout(timer);
  71.     }
  73.     // 右箭头点击切换事件；
  74.     next.onclick = function () {
  75.         if (animated) {
  76.             return;
  77.         }
  78.         // 同步小圆点的index；
  79.         if (index == 1) {
  80.             index = 5;
  81.         }
  82.         else {
  83.             index -= 1;
  84.         }
  86.         animate(600);
  87.         showButton();
  88.     }
  89.     // 左箭头点击切换事件；
  90.     prev.onclick = function () {
  91.         if (animated) {
  92.             return;
  93.         }
  94.         // 同步小圆点的index；
  95.         if (index == 5) {
  96.             index = 1;
  97.         }
  98.         else {
  99.             index += 1;
  100.         }
  102.         animate(-600);
  103.         showButton();
  104.     }
  105.     // 单击小圆点切换事件；
  106.     for (var i = 0; i < buttons.length; i++) {
  107.         buttons[i].onclick = function () {
  108.             // 停留当前图片时重复点击不刷新；
  109.             if (animated) {
  110.                 return;
  111.             }
  112.             if(this.className == 'on') {
  113.                 return;
  114.             }
  115.             var myIndex = parseInt(this.getAttribute('index'));
  116.             var offset = -600 * (myIndex - index);
  118.             animate(offset);
  119.             // 更新index值；
  120.             index = myIndex;
  121.             showButton();
  122.         }
  123.     }
  125.     container.onmouseover = stop;
  126.     container.onmouseout = play;
  128.     play();
  129. }

二、JS优化版

Demo的思想是头尾衔接一张图片以达到无限轮播的效果，但如此一来HTML冗余度比较高，不妨用DOM节点方式优化：

  1. window.onload = function () {
  2.     var container = document.getElementById('container');
  3.     var list = document.getElementById('list');
  4.     var imgs = list.getElementsByTagName('img');
  5.     var buttons = document.getElementById('buttons').getElementsByTagName('span');
  6.     var prev = document.getElementById('prev');
  7.     var next = document.getElementById('next');
  8.     var index = 1;
  9.     var len = imgs.length;
  10.     var animated = false;
  11.     var interval = 3000;
  12.     var timer;
  14.     var lastImg = document.createElement('img');
  15.     var firstImg = document.createElement('img');
  16.     firstImg.src = imgs[len-1].src;
  17.     list.insertBefore(firstImg, imgs[0]);
  18.     lastImg.src = imgs[0].src;
  19.     list.appendChild(lastImg);
  21.     // 封装点击箭头时两向滑动的函数；
  22.     function animate (offset) {
  23.         if (offset == 0) {
  24.             return;
  25.         }
  26.         animated = true;
  27.         // 位移持续时间；
  28.         var time = 300;
  29.         // 位移间隔时间；
  30.         var inteval = 50;
  31.         // 每次位移量；
  32.         var speed = offset/(time/inteval);
  33.         var left = parseInt(list.style.left) + offset;
  35.         var go = function (){
  36.             // 判断是否需要作位移；
  37.             if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {
  38.                 list.style.left = parseInt(list.style.left) + speed + 'px';
  39.                 // 递归自身以实现位移动画；
  40.                 setTimeout(go, inteval);
  41.             }
  42.             else {
  43.                 list.style.left = left + 'px';
  44.                 // 判断是否在1或5，超出时归位重置；
  45.                 if(left>-200){
  46.                     list.style.left = -600 * len + 'px';
  47.                 }
  48.                 if(left<(-600 * len)) {
  49.                     list.style.left = '-600px';
  50.                 }
  51.                 animated = false;
  52.             }
  53.         }
  54.         go();
  55.     }
  57.     // 小圆点切换功能函数；
  58.     function showButton() {
  59.         // 重置所有按钮；
  60.         for (var i = 0; i < buttons.length ; i++) {
  61.             if( buttons[i].className == 'on'){
  62.                 buttons[i].className = '';
  63.                 break;
  64.             }
  65.         }
  66.         buttons[index - 1].className = 'on';
  67.     }
  69.     // 自动播放函数；
  70.     function play() {
  71.         timer = setTimeout(function () {
  72.             prev.onclick();
  73.             play();
  74.         }, interval);
  75.     }
  76.     // 停止自动播放函数；
  77.     function stop() {
  78.         clearTimeout(timer);
  79.     }
  81.     // 右箭头点击切换事件；
  82.     next.onclick = function () {
  83.         if (animated) {
  84.             return;
  85.         }
  86.         // 同步小圆点的index；
  87.         if (index == 1) {
  88.             index = 5;
  89.         }
  90.         else {
  91.             index -= 1;
  92.         }
  94.         animate(600);
  95.         showButton();
  96.     }
  97.     // 左箭头点击切换事件；
  98.     prev.onclick = function () {
  99.         if (animated) {
  100.             return;
  101.         }
  102.         // 同步小圆点的index；
  103.         if (index == 5) {
  104.             index = 1;
  105.         }
  106.         else {
  107.             index += 1;
  108.         }
  110.         animate(-600);
  111.         showButton();
  112.     }
  113.     // 单击小圆点切换事件；
  114.     for (var i = 0; i < buttons.length; i++) {
  115.         buttons[i].onclick = function () {
  116.             // 停留当前图片时重复点击不刷新；
  117.             if (animated) {
  118.                 return;
  119.             }
  120.             if(this.className == 'on') {
  121.                 return;
  122.             }
  123.             var myIndex = parseInt(this.getAttribute('index'));
  124.             var offset = -600 * (myIndex - index);
  126.             animate(offset);
  127.             // 更新index值；
  128.             index = myIndex;
  129.             showButton();
  130.         }
  131.     }
  133.     container.onmouseover = stop;
  134.     container.onmouseout = play;
  136.     play();
  137. }

这样，HTML只需放置5张图片即可——

  1. <div id="list" style="left: -600px;">
  2.     <img src="img/1.jpg" alt="1"/>
  3.     <img src="img/2.jpg" alt="2"/>
  4.     <img src="img/3.jpg" alt="3"/>
  5.     <img src="img/4.jpg" alt="4"/>
  6.     <img src="img/5.jpg" alt="5"/>
  7. </div>

三、jQuery方法

HTML、CSS部分

与JS原生方法同。

JS部分

  1. $(function () {
  2.     var container = $('#container');
  3.     var list = $('#list');
  4.     var buttons = $('#buttons span');
  5.     var prev = $('#prev');
  6.     var next = $('#next');
  7.     var index = 1;
  8.     var len = 5;
  9.     var interval = 3000;
  10.     var timer;
  13.     function animate (offset) {
  14.         var left = parseInt(list.css('left')) + offset;
  15.         if (offset>0) {
  16.             offset = '+=' + offset;
  17.         }
  18.         else {
  19.             offset = '-=' + Math.abs(offset);
  20.         }
  21.         list.animate({'left': offset}, 300, function () {
  22.             if(left > -200){
  23.                 list.css('left', -600 * len);
  24.             }
  25.             if(left < (-600 * len)) {
  26.                 list.css('left', -600);
  27.             }
  28.         });
  29.     }
  31.     function showButton() {
  32.         buttons.eq(index-1).addClass('on').siblings().removeClass('on');
  33.     }
  35.     function play() {
  36.         timer = setTimeout(function () {
  37.             next.trigger('click');
  38.             play();
  39.         }, interval);
  40.     }
  41.     function stop() {
  42.         clearTimeout(timer);
  43.     }
  45.     next.bind('click', function () {
  46.         if (list.is(':animated')) {
  47.             return;
  48.         }
  49.         if (index == 5) {
  50.             index = 1;
  51.         }
  52.         else {
  53.             index += 1;
  54.         }
  55.         animate(-600);
  56.         showButton();
  57.     });
  59.     prev.bind('click', function () {
  60.         if (list.is(':animated')) {
  61.             return;
  62.         }
  63.         if (index == 1) {
  64.             index = 5;
  65.         }
  66.         else {
  67.             index -= 1;
  68.         }
  69.         animate(600);
  70.         showButton();
  71.     });
  73.     buttons.each(function () {
  74.          $(this).bind('click', function () {
  75.              if (list.is(':animated') || $(this).attr('class')=='on') {
  76.                  return;
  77.              }
  78.              var myIndex = parseInt($(this).attr('index'));
  79.              var offset = -600 * (myIndex - index);
  81.              animate(offset);
  82.              index = myIndex;
  83.              showButton();
  84.          })
  85.     });
  87.     container.hover(stop, play);
  89.     play();
  91. });

附：参考

慕课：焦点图轮播特效
Demo下载

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注