当前位置:   article > 正文

网页轮播图制作(html+css+js)_html轮播图

html轮播图

1.目标

        目的:用于自己做记录,记录制作的过程以及遇到的一些问题。内容参考来自b站的up主:黑马前端 的pink老师JavaScript基础语法课程。

2.功能需求

(1)当鼠标经过轮播图,左右两边的按钮出现,离开则隐藏按钮;

(2)点击左侧按钮,图片向右播放一张,以此类推,右侧同理;

(3)图片播放的同时,下面的小圆圈也会随之变化;

(4)点击小圆圈,可以播放相应的图片;

(5)鼠标不经过轮播图,轮播图会自动播放图片

html代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <link rel="stylesheet" href="css/index.css">
  9. <!-- animate要写在上面,因为是index.js使用 -->
  10. <script src="js/animate.js"></script>
  11. <script src="js/index.js"></script>
  12. </head>
  13. <body>
  14. <div class="focus">
  15. <!-- 滚动图 -->
  16. <ul class="images">
  17. <li><a href="#"><img src="images/focus.jpg" alt=""></a></li>
  18. <li><a href="#"><img src="images/focus1.jpg" alt=""></a></li>
  19. <li><a href="#"><img src="images/focus2.jpg" alt=""></a></li>
  20. <li><a href="#"><img src="images/focus3.jpg" alt=""></a></li>
  21. </ul>
  22. <!-- 小于 -->
  23. <a href="#">
  24. <sapn class="left">&lt;</sapn>
  25. </a>
  26. <!-- 大于 -->
  27. <a href="#">
  28. <sapn class="right">&gt;</sapn>
  29. </a>
  30. <!-- 小圆圈 -->
  31. <ol class="circle">
  32. </ol>
  33. </div>
  34. </body>
  35. </html>

css代码

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. ul,
  6. ol {
  7. /* 去点 */
  8. list-style: none;
  9. }
  10. .focus {
  11. position: relative;
  12. width: 721px;
  13. height: 455px;
  14. overflow: hidden;
  15. }
  16. .focus ul {
  17. /* 添加定位使用动画效果 */
  18. position: absolute;
  19. top: 0;
  20. left: 0;
  21. width: 600%;
  22. }
  23. .focus ul li {
  24. /* 需要给ul足够的宽度才能让其左浮动 */
  25. float: left;
  26. }
  27. .focus .left,
  28. .right {
  29. display: none;
  30. position: absolute;
  31. top: 216px;
  32. left: 0;
  33. width: 27px;
  34. height: 20px;
  35. background-color: black;
  36. opacity: 0.5;
  37. text-align: center;
  38. line-height: 20px;
  39. color: #fff;
  40. }
  41. .focus .right {
  42. left: 694px;
  43. }
  44. .circle {
  45. position: absolute;
  46. top: 420px;
  47. left: 20%;
  48. }
  49. .circle li {
  50. float: left;
  51. width: 10px;
  52. height: 10px;
  53. border: 1px solid #fff;
  54. border-radius: 10px;
  55. margin-left: 3px;
  56. }
  57. .current {
  58. background-color: #fff;
  59. }

3.开始制作

步骤一:当鼠标经过轮播图,左右两边的按钮出现,离开则隐藏按钮

思路:获取焦点图和左右两个按钮元素,运用mouseenter和mouseleave实现该功能

  1. // 获取元素
  2. var focus = document.querySelector('.focus');
  3. var left = document.querySelector('.left');
  4. var right = document.querySelector('.right');
  5. // 1.(1)当鼠标经过时,左右按钮出现
  6. focus.addEventListener('mouseenter', function () {
  7. left.style.display = 'block';
  8. right.style.display = 'block';
  9. })
  10. // 1.(2)当鼠标离开时,左右按钮消失
  11. focus.addEventListener('mouseleave', function () {
  12. left.style.display = 'none';
  13. right.style.display = 'none';
  14. })

步骤二:底部小圆圈的数量随图片的数量确定,实现动态生成

       思路:由于小圆圈的个数由图片决定,所以我们应该先获得图片的个数,然后利用for循环动态生成小圆圈,生成的小圆圈需要放在ol里面,此时则需要生成节点(createElement),再插入节点(appendChild)

(1)怎么得到图片的个数?要得到图片的个数,说先需要获取存放图片的ul和存放小圆圈的ol元素,然后通过ul.children.length得到图片数量

(2)如何动态生成小圆圈?通过for循环遍历,在循环里先创建小圆圈li元素,将li追加到ol中;同时先将第一个小圆圈添加样式

  1. // 2.动态生成小圆圈
  2. // 2.1获取元素
  3. // 注意要限制是focus的,因为文档中可能存在很多ul和ol
  4. var ul = focus.querySelector('.images');
  5. var ol = focus.querySelector('.circle');
  6. // console.log(ul.children.length);//输出4,为图片张数
  7. // 2.2动态生成小圆圈
  8. for (var i = 0; i < ul.children.length; i++) {
  9. // 创建小圆点li元素
  10. var li = this.document.createElement('li');
  11. // 将li插入到ol中
  12. ol.appendChild(li);
  13. }
  14. // 2.3把ol里面的第一个li设置类名current
  15. ol.children[0].className = 'current';

步骤三:实现点击哪个小圆圈,哪个小圆圈的底色就会改变

     思路:运用排他思想(点击谁,谁就添加样式current类,其他则移除current类),因为要添加事件,所以应该先给小圆圈li绑定点击事件

  1. // 3.小圆圈的排他思想,在生成小圆圈的同时直接绑定点击事件
  2. li.addEventListener('click', function () {
  3. // 3.1清除所有li
  4. for (var i = 0; i < ol.children.length; i++) {
  5. ol.children[i].className = '';
  6. }
  7. // 3.2给当前点击的li添加类 this指向函数调用者(li)
  8. this.className = 'current';
  9. })

步骤四:实现点击小圆圈图片随之滑动

       思路:图片的滑动要用到动画效果,先将封装好的动画函数(animate.js)引入进来

animate.js

  1. function animate(obj, target, callback) {
  2. clearInterval(obj.timer);
  3. obj.timer = setInterval(function () {
  4. var step = (target - obj.offsetLeft) / 10;
  5. step = step > 0 ? Math.ceil((target - obj.offsetLeft) / 10) : Math.floor(step);
  6. if (obj.offsetLeft == target) {
  7. clearInterval(obj.timer);
  8. if (callback) {
  9. callback();
  10. }
  11. }
  12. obj.style.left = obj.offsetLeft + step + 'px';
  13. }, 15);
  14. }

要使用动画效果需要添加定位,此处是ul要使用动画效果,因此要给ul添加定位。然后需要确定每次点击小圆圈ul需要走多少距离能够实现切换。同时因为是按下小圆圈移动,所以移动应写在小圆圈点击事件里面

(1)如何确定按下小圆点ul需要走多远的距离?通过小圆点的索引号×图片的宽度(比如索引号为0时,假设图片宽度为100,0×100=0,位于第一张)

(2)如何得到小圆圈的索引号?通过自定义属性index,然后将当前i的值复制给index(li.setAttribute('index', i);)

  1. // 4.点击小圆圈,移动图片
  2. // animate(obj, target, callback)
  3. // target:移动距离,索引号×图片宽度,注意是负值,因为此时是往左走
  4. // 当我们点击了某个小li,就拿到了当前li的索引号
  5. var index = this.getAttribute('index');
  6. console.log(index);
  7. var focusWidth = focus.offsetWidth;
  8. console.log(focusWidth);
  9. animate(ul, -index * focusWidth);

 

步骤五: 实现点击按钮实现图片滚动

       思路:定义一个num变量,点击一次自增1,然后用num*图片宽度,就是滚动的距离。此时可以实现点击按钮图片滚动,但点击到最后一张时再次点击会出现背景而不是回到第一张,如图:

 于是我们实现图片无缝滚动:在html代码中将第一张图复制一份放在最后,利用if进行判断,当图片滚动到最后一张图(复制的那张)时,让ul的left值改为0,同时num赋值为0,这样当再次点击时则会出现第二张图

  1. // 5.点击右侧按钮,图片滚动一张
  2. var num = 0;//全局变量
  3. right.addEventListener('click', function () {
  4. // alert(11);//测试事件是否绑定
  5. // 如果走到了最后复制的一张,此时我们的ul要快速复原left改为0,实现无缝滚动
  6. if (num == ul.children.length - 1) {
  7. ul.style.left = 0;
  8. num = 0;
  9. }
  10. num++;
  11. animate(ul, -num * focusWidth);
  12. })

      但是这样设置以后会出现问题:首先下面的小圆圈会变成5个,同时采用手动复制的方式相当有局限性。因此我们可以在js中直接克隆第一张图片,利用cloneNode(),加true为深克隆,会复制里面的子节点,false为浅克隆,克隆后的添加到ul最后面(appendChild)

  1. // 克隆第一张图片(li)放到ul最后面 写在小圆圈的后面,所以小圆圈不会多
  2. var first = ul.children[0].cloneNode(true);
  3. ul.appendChild(first);

步骤六:实现点击按钮时,下面的小圆点也随之动 

       思路:定义一个新的全局变量circle,每次自增一,运用排他思想,给circle所在的小圆圈添加current类,其他移除current类。同时由于最后一张图片是克隆的,所以要给circle添加一个判断条件,当circle等于小圆圈的总个数时,说明走到最后一张了,此时给circle赋值0

  1. // 6.点击右侧按钮,小圆圈跟随一起变化,可以再声明一个变量控制小圆圈的播放
  2. circle++;
  3. // 如果circle==4,说明走到克隆图片了
  4. if (circle == ol.children.length) {
  5. circle = 0;
  6. }
  7. // 清除其余小圆圈的current类名
  8. for (var i = 0; i < ol.children.length; i++) {
  9. ol.children[i].className = '';
  10. }
  11. // 留下当前的小圆圈current类
  12. ol.children[circle].className = 'current';

 同时,要将小圆圈与按钮建立联系,否则会出现点击了某一个小圆圈,再点击按钮播放下一张却播放图片与小圆圈对不上号的现象。

  1. // 当我们点击了某个小圆圈,就要把li的索引号给num
  2. num = index;
  3. // 当我们点击了某个小圆圈,就要把li的索
  4. circle = index;

步骤七:制作左边按钮,实现如上功能

      思路:当num等于0时,位于第一张图片,此时点击左侧按钮,应该移动到克隆的前一张,同时图片是快速的移动到第三张所以应该为负值

  1. // 7.左侧按钮
  2. left.addEventListener('click', function () {
  3. if (num == 0) {
  4. num = ul.children.length - 1;
  5. ul.style.left = -num * focusWidth + 'px';
  6. }
  7. num--;//注意是--,反向的
  8. animate(ul, -num * focusWidth);
  9. circle--;
  10. // 如果circle<0,说明第一张图片,则小圆圈要改为第四个小圆圈
  11. if (circle < 0) {
  12. circle = ol.children.length - 1;
  13. }
  14. // 清除其余小圆圈的current类名
  15. for (var i = 0; i < ol.children.length; i++) {
  16. ol.children[i].className = '';
  17. }
  18. // 留下当前的小圆圈current类
  19. ol.children[circle].className = 'current';
  20. });

步骤八:实现自动播放

       思路:自动播放,则用到定时器;其中自动播放功能类似于我们点击右侧按钮,因此我们可以手动调用右侧按钮的点击事件;当鼠标经过时,停止自动播放,在鼠标经过事件中停止定时器,在鼠标离开事件中使用定时器

  1. // 8.自动播放功能
  2. var timer = setInterval(function () {
  3. // 手动调用事件
  4. right.click();
  5. }, 2000);
  1. focus.addEventListener('mouseenter', function () {
  2. left.style.display = 'block';
  3. right.style.display = 'block';
  4. clearInterval(timer);
  5. timer = null;//清除定时器
  6. })
  1. focus.addEventListener('mouseleave', function () {
  2. left.style.display = 'none';
  3. right.style.display = 'none';
  4. timer = setInterval(function () {
  5. // 手动调用事件
  6. right.click();
  7. }, 1000);
  8. })

步骤九:节流阀,防止 轮播图按钮连续点击而造成图片播放过快

       思路:节流阀是当上一个函数动画内容执行完毕后,再去执行下一个函数动画,让事件无法连续触发。利用回调函数,添加一个变量,利用变量来锁住和解锁函数

  1. // flag 节流阀
  2. var flag = true;
  3. right.addEventListener('click', function () {
  4. if (flag) {
  5. flag = false;//关闭节流阀
  6. // alert(11);//测试事件是否绑定
  7. // 如果走到了最后复制的一张,此时我们的ul要快速复原left改为0,实现无缝滚动
  8. if (num == ul.children.length - 1) {
  9. ul.style.left = 0;
  10. num = 0;
  11. }
  12. num++;
  13. animate(ul, -num * focusWidth, function () {
  14. flag = true;//打开节流阀
  15. });
  16. // 6.点击右侧按钮,小圆圈跟随一起变化,可以再声明一个变量控制小圆圈的播放
  17. circle++;
  18. // 如果circle==4,说明走到克隆图片了
  19. if (circle == ol.children.length) {
  20. circle = 0;
  21. }
  22. //调用函数
  23. circleChange();
  24. }
  25. });

 4.总结

最后的效果图就不放了,因为太大了放不上来。

所有js的代码

  1. // 因为js是写在外部的,所以需要添加load事件:页面全部加载完之后再执行js
  2. window.addEventListener('load', function () {
  3. // 获取元素
  4. var focus = document.querySelector('.focus');
  5. var left = document.querySelector('.left');
  6. var right = document.querySelector('.right');
  7. var focusWidth = focus.offsetWidth;
  8. // 1.(1)当鼠标经过时,左右按钮出现
  9. focus.addEventListener('mouseenter', function () {
  10. left.style.display = 'block';
  11. right.style.display = 'block';
  12. clearInterval(timer);
  13. timer = null;//清除定时器
  14. })
  15. // 1.(2)当鼠标离开时,左右按钮消失
  16. focus.addEventListener('mouseleave', function () {
  17. left.style.display = 'none';
  18. right.style.display = 'none';
  19. timer = setInterval(function () {
  20. // 手动调用事件
  21. right.click();
  22. }, 1000);
  23. })
  24. // 2.动态生成小圆圈
  25. // 2.1获取元素
  26. // 注意要限制是focus的,因为文档中可能存在很多ul和ol
  27. var ul = focus.querySelector('.images');
  28. var ol = focus.querySelector('.circle');
  29. // console.log(ul.children.length);//输出4,为图片张数
  30. // 2.2动态生成小圆圈
  31. for (var i = 0; i < ul.children.length; i++) {
  32. // 创建小圆点li元素
  33. var li = this.document.createElement('li');
  34. // 记录当前小圆圈的索引号,通过自定义属性来做
  35. li.setAttribute('index', i);
  36. // 将li插入到ol中
  37. ol.appendChild(li);
  38. // 3.小圆圈的排他思想,在生成小圆圈的同时直接绑定点击事件
  39. li.addEventListener('click', function () {
  40. // 3.1清除所有li
  41. for (var i = 0; i < ol.children.length; i++) {
  42. ol.children[i].className = '';
  43. }
  44. // 3.2给当前点击的li添加类 this指向函数调用者(li)
  45. this.className = 'current';
  46. // 4.点击小圆圈,移动图片
  47. // animate(obj, target, callback)
  48. // target:移动距离,索引号×图片宽度,注意是负值,因为此时是往左走
  49. // 当我们点击了某个小li,就拿到了当前li的索引号
  50. var index = this.getAttribute('index');
  51. // 当我们点击了某个小圆圈,就要把li的索引号给num
  52. num = index;
  53. // 当我们点击了某个小圆圈,就要把li的索
  54. circle = index;
  55. console.log(index);
  56. // var focusWidth = focus.offsetWidth;//由于下面要使用,所以应该把它作为全局变量,放在外面
  57. console.log(focusWidth);
  58. animate(ul, -index * focusWidth);
  59. })
  60. }
  61. // 2.3把ol里面的第一个li设置类名current
  62. ol.children[0].className = 'current';
  63. // 克隆第一张图片(li)放到ul最后面 写在小圆圈的后面,所以小圆圈不会多
  64. var first = ul.children[0].cloneNode(true);
  65. ul.appendChild(first);
  66. // 5.点击右侧按钮,图片滚动一张
  67. var num = 0;//全局变量
  68. var circle = 0;
  69. // flag 节流阀
  70. var flag = true;
  71. right.addEventListener('click', function () {
  72. if (flag) {
  73. flag = false;//关闭节流阀
  74. // alert(11);//测试事件是否绑定
  75. // 如果走到了最后复制的一张,此时我们的ul要快速复原left改为0,实现无缝滚动
  76. if (num == ul.children.length - 1) {
  77. ul.style.left = 0;
  78. num = 0;
  79. }
  80. num++;
  81. animate(ul, -num * focusWidth, function () {
  82. flag = true;//打开节流阀
  83. });
  84. // 6.点击右侧按钮,小圆圈跟随一起变化,可以再声明一个变量控制小圆圈的播放
  85. circle++;
  86. // 如果circle==4,说明走到克隆图片了
  87. if (circle == ol.children.length) {
  88. circle = 0;
  89. }
  90. //调用函数
  91. circleChange();
  92. }
  93. });
  94. // 7.左侧按钮
  95. left.addEventListener('click', function () {
  96. if (flag) {
  97. flag = false;
  98. if (num == 0) {
  99. num = ul.children.length - 1;
  100. ul.style.left = -num * focusWidth + 'px';
  101. }
  102. num--;//注意是--,反向的
  103. animate(ul, -num * focusWidth, function () {
  104. flag = true;
  105. });
  106. circle--;
  107. // 如果circle<0,说明第一张图片,则小圆圈要改为第四个小圆圈
  108. // if (circle < 0) {
  109. // circle = ol.children.length - 1;
  110. // }改为三元表达式更简洁
  111. circle = circle < 0 ? ol.children.length - 1 : circle;
  112. circleChange();
  113. }
  114. });
  115. function circleChange() {
  116. // 清除其余小圆圈的current类名
  117. for (var i = 0; i < ol.children.length; i++) {
  118. ol.children[i].className = '';
  119. }
  120. // 留下当前的小圆圈current类
  121. ol.children[circle].className = 'current';
  122. }
  123. // 8.自动播放功能
  124. var timer = setInterval(function () {
  125. // 手动调用事件
  126. right.click();
  127. }, 2000);
  128. })

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/803824
推荐阅读
相关标签
  

闽ICP备14008679号