企业管理系统定制开发【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解 自动播放+手动播放

企业管理系统定制开发已经成了页面开发中不企业管理系统定制开发可缺少的一部分，企业管理系统定制开发日常生活中随处都能见企业管理系统定制开发到轮播图的身影，企业管理系统定制开发例如平常我们购物的淘宝，京东等等，企业管理系统定制开发都靠着轮播图在一片 企业管理系统定制开发有限的区域内展现出更多的商品。企业管理系统定制开发这也是前端程序员最早企业管理系统定制开发接触到的练手小项目，企业管理系统定制开发这篇文章带大家透彻拿下轮播图！从此不再迷茫

 首先我们来看一下本次案例的效果：

（下面有请本人出境！话说我是在搞不明白 gif 图怎么设置，但总之就是该有的功能都有，不该有的功能也有（例如杀狗 hhhhh），自动播放，点击切换按钮切换图片，点击下方圆点切换图片均可实现，就不一一演示了，主要还是让大家搞明白原理是什么）

  1. 轮播图的基本结构搭建及原理分析
  2. 光标移动至轮播图处切换按钮的显示与隐藏
  3. 点击下方按钮切换图片的实现
  4. 右侧按钮滚动实现 以及 下方点点同步改变
  5. 左侧按钮滚动实现 以及 下方点点同步改变
  6. 自动播放实现

一： 轮播图的基本结构搭建及原理分析

其实轮播图的构成很简单，仅由显示区域和图片区域两部分组成，图片区域由一个 ul 标签实现，内部一个 li 标签里放一张图片，使其左浮动形成一行，其移动其实靠的就是 ul 的  左右移动来改变显示区域，效果如下：（页面结构的HTML与CSS，还有封装好的动画函数js文件在文章末尾）

二： 光标移动至轮播图处切换按钮的显示与隐藏

 光标移动到轮播图区域使左右切换图片按钮显示与隐藏，我们用到两个事件分为： mouseenter 和 mouseleave，之所以不用 mouseover 和 mouseout 是因为这两个事件会冒泡，会产生很多不可控的影响，但两组事件的效果几乎完全相同。绑定事件后改变按钮的 display 值即可。

首先我们先了解一下获取到的元素有哪些，以免下面的分步讲解有疑惑的地方：

  1.     var leftbtn=document.querySelector('.leftbtn');   //左按钮
  2.     var rightbtn=document.querySelector('.rightbtn');  //右按钮
  3.     var windows=document.querySelector('.windows');  //显示窗口区域
  4.     var circleul=document.querySelector('.imgbox');  //装图片的 ul
  5.     var circleol=document.querySelector('.circle');  //装下方小点点的 ol

此部分是 光标移动至轮播图处切换按钮的显示与隐藏 的实现：

  1.   windows.addEventListener('mouseenter',function(){
  2.         leftbtn.style.display='block';
  3.         rightbtn.style.display='block';
  4.         clearInterval(timer)    //清除定时器自动播放，此处不需要管
  5.         timer=null;
  6.     })
  7.     windows.addEventListener('mouseleave',function(){
  8.         leftbtn.style.display='none'
  9.         rightbtn.style.display='none'
  10.         timer=setInterval(function(){
  11.             rightbtn.click();
  12.         },2000)
  13.     })
  14.     leftbtn.addEventListener('click',function(){  //按钮点击后变色一下的效果
  15.         leftbtn.style.color='grey'
  16.         var timer=setTimeout(function(){
  17.             leftbtn.style.color='aliceblue'
  18.         },100)
  19.     })
  20.     rightbtn.addEventListener('click',function(){
  21.         rightbtn.style.color='grey'
  22.         var timer=setTimeout(function(){
  23.            rightbtn.style.color='aliceblue'
  24.         },100)
  25.     })

 三：点击下方按钮切换图片的实现

for循环的作用为根据 ul 中图片的个数来添加 ol 中小点点的个数并添加在 ol 中，给创建的 li 添加自定义属性 index，for 循环的 i 作为其每个 li 的属性值，而图片作为ul的子节点，分别对应 children[0]，children[1]，children[2]，children[3]，正好与自定义属性的 index 一一对应，也就是说每个点点都配对一个同样序号的图片。

在添加每个 li 的同时就给每个 li 绑定点击事件，并获取该自定义属性index，使用 排他思想 更改点击的原点的颜色，并调用封装好的动画函数就可以完成点击小圆点切换图片的效果

 这两行是移动的关键代码：windows.offsetWidt 作用是获取每张图片的宽度，-6 是为了消除一些移动中由于图片与图片之间间隔产生的误差

  1. var imgwidth=windows.offsetWidth-6;
  2. var long=this.getAttribute('index')*imgwidth;

点第一个小点点：

 点第二个小点点：

 点第三个小点点：

代码实现：

  1.  for(var i=0;i<circleul.children.length;i++){   //根据图片个数自动创建小点点个数
  2.         lis=document.createElement('li');
  3.         lis.setAttribute('index',i);
  4.         circleol.appendChild(lis);
  5.         lis.addEventListener('click',function(){
  6.             var currentindex=this.getAttribute('index'); //bug整改
  7.             num=currentindex;  //bug整改
  8.             circlechange=currentindex;  //bug整改
  9.             for(var i=0;i<circleol.children.length;i++){  //排他思想
  10.                 circleol.children[i].className='';
  11.             }
  12.             this.className='circlecolor';
  13.             var imgwidth=windows.offsetWidth-6;
  14.             var long=this.getAttribute('index')*imgwidth;
  15.             run(circleul,-long);  //封装好的动画函数
  16.         })
  17.     }

 四：右侧按钮滚动实现 以及 下方点点同步改变

总算到了关键的一步，通过按钮来使轮播图运动，也是本案例最抽象的一部分，抽象在它最后一张和第一张的无缝衔接，此处要说明我们要使其无缝衔接的原理，是将第一张图片克隆一份放在最后一张图片的后面（下方点点数不包括克隆的这一张图片，但是ul 的子元素包含了这个新克隆的图片！），在图片滚动到该克隆图片后，立马将其 ul 的 left 值改为 0 。

克隆第一张图片我们使用节点的带参克隆 ：

  1. var firstimg=circleul.children[0].cloneNode(true);
  2. circleul.appendChild(firstimg);

我们已经知道了图片滚动的距离等于该图片的顺序乘图片宽度，在这里我们先设置一个全局变量num，并设初始值为0，点击一次右侧按钮则 num 自增1，第一次点击 num自增1， num=1，移动距离为 1✖宽度，第二次点击 num 自增 1，num=2，移动距离为 2✖宽度，前面几步都好理解，但是当num 为最后无缝衔接时需要一个判断语句，我们重点研究无缝衔接的原理： 

第一次点击右侧按钮后： 

 第二次点击右侧按钮后：

 第三次点击右侧按钮后：

第四次点击右侧按钮后：

注意此步骤判断前 num=3，即不执行判断里的语句，但是判断完后num自增为4，也就是说下一次就要执行判断里的语句

 第五次点击右侧按钮后：

为什么点击后直接到了第二张图片呢？不是在判断语句里设置了left为0吗？这是因为判断中设置了num=0和left=0后才自增1，所以这一次点击后带入动画函数的num=1，移动距离为1✖宽度，又开始新一轮循环图片！

代码实现：

  1.     num=0;
  2.     circlechange=0;  //目的为下方点点同步改变时使用，这一步先不用管这个参数
  3.     rightbtn.addEventListener('click',function(){
  4.         if(num==circleul.children.length-1){
  5.             circleul.style.left=0;
  6.             num=0;
  7.         }
  8.         num++;
  9.         long=num*windows.offsetWidth-6*num;
  10.         run(circleul,-long);

我们点击右侧按钮，图片滚动的同时，小圆圈也应该跟着切换才对，该怎么实现呢？

每点击一次都让circlechange这个变量自增，当自增到值和 circleul.children.length-1 的值相等时（即滚动到了克隆过去的最后一张图片），这时让 circlechange 变为 0 即可

  1.   circlechange++;
  2.         if(circlechange==circleul.children.length-1){
  3.            circlechange=0;
  4.         }
  5.         for(var i=0;i<circleol.children.length;i++){  //排他思想
  6.              circleol.children[i].className='';
  7.         }
  8.         circleol.children[circlechange].className='circlecolor';
  9.     })

五：左侧按钮滚动实现 以及 下方点点同步改变 

向左切换和向右切换的原理类似，在此我们只研究第一张图片开始往左无缝衔接最后一张图片的过程

第一次点击左侧按钮后：

代码实现： 

  1.  leftbtn.addEventListener('click',function(){
  2.         if(num==0){
  3.             circleul.style.left=(circleul.children.length-1)*windows.offsetWidth;
  4.             num=circleul.children.length-1;
  5.         }
  6.         num--;
  7.         long=num*windows.offsetWidth-6*num;
  8.         run(circleul,-long);

 点击左侧按钮，小圆圈跟随切换：

  1.  circlechange--;
  2.         if(circlechange<0){
  3.            circlechange=circleol.children.length-1;  //注意此处是ol的子节点的长度-1
  4.         }
  5.         for(var i=0;i<circleol.children.length;i++){
  6.              circleol.children[i].className='';
  7.         }
  8.         circleol.children[circlechange].className='circlecolor';
  9.     })

六：自动播放实现

自动播放最简单！，只需要一个自动点击即可

此处为右侧按钮自动点击：rightbtn.click()

将其添加在定时器中就可以完成我们的轮播图啦

  1.  var timer=setInterval(function(){
  2.             rightbtn.click();
  3.         },2000)

完整JS代码：

我们的 JS 是单独的一个文件，所以加入了 load 事件等文档流执行完毕后，再执行 JS 的内容

  1. window.addEventListener('load',function(){
  2.     var leftbtn=document.querySelector('.leftbtn');
  3.     var rightbtn=document.querySelector('.rightbtn');
  4.     var windows=document.querySelector('.windows');
  5.     var circleul=document.querySelector('.imgbox');
  6.     var circleol=document.querySelector('.circle');
  7.     //光标移动至轮播图区域按钮显示，移开隐藏，点击按钮的变化效果
  8.     windows.addEventListener('mouseenter',function(){
  9.         leftbtn.style.display='block';
  10.         rightbtn.style.display='block';
  11.         clearInterval(timer)//清除定时器自动播放
  12.         timer=null;
  13.     })
  14.     windows.addEventListener('mouseleave',function(){
  15.         leftbtn.style.display='none'
  16.         rightbtn.style.display='none'
  17.         timer=setInterval(function(){
  18.             rightbtn.click();
  19.         },2000)
  20.     })
  21.     leftbtn.addEventListener('click',function(){
  22.         leftbtn.style.color='grey'
  23.         var timer=setTimeout(function(){
  24.             leftbtn.style.color='aliceblue'
  25.         },100)
  26.     })
  27.     rightbtn.addEventListener('click',function(){
  28.         rightbtn.style.color='grey'
  29.         var timer=setTimeout(function(){
  30.            rightbtn.style.color='aliceblue'
  31.         },100)
  32.     })
  33.     //点击小圆圈可以滚动
  34.     for(var i=0;i<circleul.children.length;i++){
  35.         lis=document.createElement('li');
  36.         lis.setAttribute('index',i);
  37.         circleol.appendChild(lis);
  38.         lis.addEventListener('click',function(){
  39.             var currentindex=this.getAttribute('index');//bug整改（3行）
  40.             num=currentindex;
  41.             circlechange=currentindex;
  42.             for(var i=0;i<circleol.children.length;i++){
  43.                 circleol.children[i].className='';
  44.             }
  45.             this.className='circlecolor';
  46.             var imgwidth=windows.offsetWidth-6;
  47.             var long=this.getAttribute('index')*imgwidth;
  48.             run(circleul,-long);
  49.         })
  50.     }
  51.     circleol.children[0].className='circlecolor';
  52.     //克隆第一张图片至末尾
  53.     var firstimg=circleul.children[0].cloneNode(true);
  54.     circleul.appendChild(firstimg);
  55.  
  56. //右侧按钮点击滚动
  57.     num=0;
  58.     circlechange=0;
  59.     rightbtn.addEventListener('click',function(){
  60.         if(num==circleul.children.length-1){
  61.             circleul.style.left=0;
  62.             num=0;
  63.         }
  64.         num++;
  65.         long=num*windows.offsetWidth-6*num;
  66.         run(circleul,-long);
  67.     //小圆圈跟着一起变化
  68.         circlechange++;
  69.         if(circlechange==circleul.children.length-1){
  70.            circlechange=0;
  71.         }
  72.         for(var i=0;i<circleol.children.length;i++){
  73.              circleol.children[i].className='';
  74.         }
  75.         circleol.children[circlechange].className='circlecolor';
  76.     })
  77.     //左侧按钮滚动
  78.     leftbtn.addEventListener('click',function(){
  79.         if(num==0){
  80.             circleul.style.left=(circleul.children.length-1)*windows.offsetWidth;
  81.             num=circleul.children.length-1;
  82.         }
  83.         num--;
  84.         long=num*windows.offsetWidth-6*num;
  85.         run(circleul,-long);
  86.     //小圆圈跟着一起变化
  87.         circlechange--;
  88.         if(circlechange<0){
  89.            circlechange=circleol.children.length-1;  //注意此处是ol的子节点的长度-1
  90.         }
  91.         for(var i=0;i<circleol.children.length;i++){
  92.              circleol.children[i].className='';
  93.         }
  94.         circleol.children[circlechange].className='circlecolor';
  95.     })
  96.    //自动播放
  97.         var timer=setInterval(function(){
  98.             rightbtn.click();
  99.         },2000)
  100.  
  101. })

动画函数代码：

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

HTML+CSS 完整代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .windows{
  14.             position: relative;
  15.             border: 3px rgb(146, 146, 146) solid;
  16.             width: 700px;
  17.             height: 450px;
  18.             background-color: rgb(250, 186, 186);
  19.             margin: 170px auto;
  20.             overflow: hidden;
  21.         }
  22.         .leftbtn{
  23.             z-index: 999;
  24.              position: absolute;
  25.              box-sizing: border-box;
  26.              top: 195px;
  27.              left: 0;
  28.              width: 50px;
  29.              height: 70px;
  30.              background-color: rgba(136, 135, 135, 0.582);
  31.              line-height: 70px;
  32.              text-align: center;
  33.              font-size: 35px;
  34.              color: rgba(255, 255, 255, 0.609);
  35.              cursor: pointer;
  36.              display: none;
  37.         }
  38.         .leftbtn:hover{
  39.             background-color: rgba(189, 186, 186, 0.623);
  40.             color: aliceblue;
  41.         }
  42.         .rightbtn{
  43.             z-index: 999;
  44.              position: absolute;
  45.              box-sizing: border-box;
  46.              top: 195px;
  47.              right: 0;
  48.              width: 50px;
  49.              height: 70px;
  50.              background-color: rgba(136, 135, 135, 0.609);
  51.              line-height: 70px;
  52.              text-align: center;
  53.              font-size: 35px;
  54.              color: rgba(255, 255, 255, 0.596);
  55.              cursor: pointer;
  56.              display: none;
  57.         }
  58.         .rightbtn:hover{
  59.             background-color: rgba(189, 186, 186, 0.623);
  60.             color: aliceblue;
  61.         }
  62.         .imgbox{
  63.            position:absolute;
  64.            left: 0;
  65.            top: 0;
  66.             box-sizing: border-box;
  67.             width: 700%;
  68.             height: 450px;
  69.         }
  70.         .imgbox li{
  71.             float: left;
  72.             box-sizing: border-box;
  73.             width: 700px;
  74.             height: 450px;
  75.             list-style: none;
  76.         }
  77.         .imgbox li a{
  78.             box-sizing: border-box;
  79.             display: inline-block;
  80.             width: 700px;
  81.             height: 450px;
  82.             background-color: rgb(134, 152, 255);
  83.         }
  84.         .imgbox li a img{
  85.             cursor:auto;
  86.             width: 700px;
  87.             height: 450px;
  88.         }
  89.         .circlebox{
  90.             position: absolute;
  91.             bottom: 0;
  92.             width: 700px;
  93.             height: 40px;
  94.             background-color: rgba(94, 94, 94, 0.486);
  95.  
  96.         }
  97.         .circle {
  98.             position: absolute;
  99.             bottom: 10px;
  100.             left: 300px;
  101.         }
  102.         .circle li {
  103.             float: left;
  104.             width: 7px;
  105.             height: 7px;
  106.             list-style: none;
  107.             border: 2px solid rgb(185, 185, 185);
  108.             border-radius:100%;
  109.             margin: 3px;
  110.             cursor: pointer;
  111.             background-color: rgb(173, 173, 173);
  112.         }
  113.         .circlecolor{
  114.             background-color: coral !important;
  115.             border: 2px solid coral !important;
  116.         }
  117.     </style>
  118.     <script src="../js/run.js"></script>
  119.     <script src="../js/btn-display.js"></script>
  120. </head>
  121. <body>
  122.     <div class="windows">
  123.         <div class="leftbtn"> < </div>
  124.         <div class="rightbtn"> > </div>
  125.         <ul class="imgbox">
  126.             <li>
  127.                 <a href="#"><img src="../轮播photo/1.jpg" alt="轮播图" class="lunboimg"></a>
  128.             </li>
  129.             <li>
  130.                 <a href="#"><img src="../轮播photo/2.jpg" alt="轮播图" class="lunboimg"></a>
  131.             </li>
  132.             <li>
  133.                 <a href="#"><img src="../轮播photo/3.jpg" alt="轮播图" class="lunboimg"></a>
  134.             </li>
  135.             <li>
  136.                 <a href="#"><img src="../轮播photo/4.jpg" alt="轮播图" class="lunboimg"></a>
  137.             </li>
  138.             <li>
  139.                 <a href="#"><img src="../轮播photo/5.jpg" alt="轮播图" class="lunboimg"></a>
  140.             </li>
  141.             <li>
  142.                 <a href="#"><img src="../轮播photo/6.jpg" alt="轮播图" class="lunboimg"></a>
  143.             </li>
  144.         </ul>
  145.         <div class="circlebox">
  146.                <ol class="circle"></ol>
  147.         </div>
  148.       
  149.      
  150.        
  151.     </div>
  152. </body>
  153. </html>

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