定制网站网页轮播图制作（html+css+js）

1.目标

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

2.功能需求

（1）定制网站定制网站当鼠标经过轮播图，定制网站定制网站左右两边的按钮出现，定制网站定制网站离开则隐藏按钮；

（2）定制网站点击左侧按钮，定制网站图片向右播放一张，以此类推，右侧同理；

（3）定制网站图片播放的同时，定制网站下面的小圆圈也会随之变化；

（4）定制网站点击小圆圈，定制网站可以播放相应的图片；

（5）定制网站鼠标不经过轮播图，定制网站轮播图会自动播放图片

html代码

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

css代码

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

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. })

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发