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

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

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

二、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;
  13. var lastImg = document.createElement('img');
  14. var firstImg = document.createElement('img');
  15. firstImg.src = imgs[len-1].src;
  16. list.insertBefore(firstImg, imgs[0]);
  17. lastImg.src = imgs[0].src;
  18. list.appendChild(lastImg);
  19. // 封装点击箭头时两向滑动的函数;
  20. function animate (offset) {
  21. if (offset == 0) {
  22. return;
  23. }
  24. animated = true;
  25. // 位移持续时间;
  26. var time = 300;
  27. // 位移间隔时间;
  28. var inteval = 50;
  29. // 每次位移量;
  30. var speed = offset/(time/inteval);
  31. var left = parseInt(list.style.left) + offset;
  32. var go = function (){
  33. // 判断是否需要作位移;
  34. if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {
  35. list.style.left = parseInt(list.style.left) + speed + 'px';
  36. // 递归自身以实现位移动画;
  37. setTimeout(go, inteval);
  38. }
  39. else {
  40. list.style.left = left + 'px';
  41. // 判断是否在1或5,超出时归位重置;
  42. if(left>-200){
  43. list.style.left = -600 * len + 'px';
  44. }
  45. if(left<(-600 * len)) {
  46. list.style.left = '-600px';
  47. }
  48. animated = false;
  49. }
  50. }
  51. go();
  52. }
  53. // 小圆点切换功能函数;
  54. function showButton() {
  55. // 重置所有按钮;
  56. for (var i = 0; i < buttons.length ; i++) {
  57. if( buttons[i].className == 'on'){
  58. buttons[i].className = '';
  59. break;
  60. }
  61. }
  62. buttons[index - 1].className = 'on';
  63. }
  64. // 自动播放函数;
  65. function play() {
  66. timer = setTimeout(function () {
  67. prev.onclick();
  68. play();
  69. }, interval);
  70. }
  71. // 停止自动播放函数;
  72. function stop() {
  73. clearTimeout(timer);
  74. }
  75. // 右箭头点击切换事件;
  76. next.onclick = function () {
  77. if (animated) {
  78. return;
  79. }
  80. // 同步小圆点的index;
  81. if (index == 1) {
  82. index = 5;
  83. }
  84. else {
  85. index -= 1;
  86. }
  87. animate(600);
  88. showButton();
  89. }
  90. // 左箭头点击切换事件;
  91. prev.onclick = function () {
  92. if (animated) {
  93. return;
  94. }
  95. // 同步小圆点的index;
  96. if (index == 5) {
  97. index = 1;
  98. }
  99. else {
  100. index += 1;
  101. }
  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);
  117. animate(offset);
  118. // 更新index值;
  119. index = myIndex;
  120. showButton();
  121. }
  122. }
  123. container.onmouseover = stop;
  124. container.onmouseout = play;
  125. play();
  126. }

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

附:参考

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

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