定制化开发JS实现轮播图（一看就懂逻辑清晰）

定制化开发有很多种实现方法，定制化开发这是其中一种最清晰的方法。定制化开发思路很清晰，定制化开发代码很简单，定制化开发欢迎大佬多指教。

定制化开发先来看下效果图，定制化开发嫌麻烦就不用具体图片来实现了，定制化开发主要是理清思路。（自动轮播，左右按钮切换图片，小圆点切换图片，鼠标移入暂停轮播，鼠标移出继续轮播）

 HTML

首先是html内容，布局很简单，一个图片列表，一个点列表，两个按钮。注意data-index使用HTML5中的data-xx属性来嵌入自定义数据（下面JS代码会提到）。记得给默认显示的图片和对应的小圆点加上active类哦。

  1.  <div class="wrap">
  2.         <ul class="list">
  3.             <li class="item active">0</li>
  4.             <li class="item">1</li>
  5.             <li class="item">2</li>
  6.             <li class="item">3</li>
  7.             <li class="item">4</li>
  8.         </ul>
  9.         <ul class="pointList">
  10.             <li class="point active" data-index = 0></li>
  11.             <li class="point" data-index = 1></li>
  12.             <li class="point" data-index = 2></li>
  13.             <li class="point" data-index = 3></li>
  14.             <li class="point" data-index = 4></li>
  15.         </ul>
  16.         <button class="btn" id="leftBtn"> < </button> 
  17.         <button class="btn" id="rightBtn"> > </button>
  18.  
  19.     </div>

CSS 

思路：父容器list，item绝对定位，实现让所有图片重叠在父容器内。利用z-index来设置图片高度，图片高度最高会显示在顶层上。那么整个容器中，左右切换按钮和小圆点始终要在最顶层，不能被图片覆盖，所以他们的z-index一定要比图片高。active是一个样式，给某张图片绑定这个样式就能在最上层显示。然后就是图片切换的渐变效果，opacity完全不透明到透明，再加个transition动画效果。最后就是cursor给小圆点添加“小手指”，其他就没什么好说的了。

  1. <style>
  2.         .wrap {
  3.             width: 800px;
  4.             height: 400px;
  5.             position: relative;
  6.         }
  7.  
  8.         .list {
  9.             width: 800px;
  10.             height: 400px;
  11.             position: relative;
  12.             padding-left: 0px;
  13.         }
  14.  
  15.         .item {
  16.             width: 100%;
  17.             height: 100%;
  18.             list-style: none;
  19.             position: absolute;
  20.             left: 0;
  21.             opacity: 0;
  22.             transition: all .8s;
  23.         }
  24.  
  25.         .item:nth-child(1) {
  26.             background-color: skyblue;
  27.         }
  28.  
  29.         .item:nth-child(2) {
  30.             background-color: yellowgreen;
  31.         }
  32.  
  33.         .item:nth-child(3) {
  34.             background-color: rebeccapurple;
  35.         }
  36.  
  37.         .item:nth-child(4) {
  38.             background-color: pink;
  39.         }
  40.  
  41.         .item:nth-child(5) {
  42.             background-color: orange;
  43.         }
  44.  
  45.         .item.active {
  46.             z-index: 10;
  47.             opacity: 1;
  48.         }
  49.  
  50.         .btn {
  51.             width: 60px;
  52.             height: 100px;
  53.             z-index: 100;
  54.             top: 150px;
  55.             position: absolute;
  56.         }
  57.  
  58.         #leftBtn {
  59.             left: 0px;
  60.         }
  61.  
  62.         #rightBtn {
  63.             right: 0px;
  64.         }
  65.  
  66.         .pointList {
  67.             list-style: none;
  68.             padding-left: 0px;
  69.             position: absolute;
  70.             right: 20px;
  71.             bottom: 20px;
  72.             z-index: 200;
  73.         }
  74.  
  75.         .point {
  76.             width: 10px;
  77.             height: 10px;
  78.             background-color: antiquewhite;
  79.             border-radius: 100%;
  80.             float: left;
  81.             margin-right: 8px;
  82.             border-style: solid;
  83.             border-width: 2px;
  84.             border-color: slategray;
  85.             cursor: pointer;  
  86.         }
  87.  
  88.         .point.active{
  89.             background-color: cadetblue;
  90.         }
  91.     </style>

Javascript 

Index可以说是整个代码里面的"核心"，先封装一个清除active的方法，这里面要清除图片的active（显示在最上层），比如切换到下一张图上张图的active就要清除。还有point的active（图片对应小圆点改变样式）。然后goIndex这个方法就是给图片和对应的小圆点同时加上active，左右按钮绑定的方法就不说了。

用getAttribute拿到刚才给li标签绑定的data-index属性，绑定图片index = pointindex，就能实现点击小圆点图片切换了。由于上面goIndex方法早已经绑定好了给图片添加active样式的时候也给小圆点添加的样式了，就可以实现图片切换小圆点跟随变化的效果。

  1. <script>
  2.         var items = document.querySelectorAll(".item");//图片节点
  3.         var points = document.querySelectorAll(".point")//点
  4.         var left = document.getElementById("leftBtn");
  5.         var right = document.getElementById("rightBtn");
  6.         var all = document.querySelector(".wrap")
  7.         var index = 0;
  8.         var time = 0;//定时器跳转参数初始化
  9.         
  10.  
  11.         //封装一个清除active方法
  12.         var clearActive = function () {
  13.             for (i = 0; i < items.length; i++) {
  14.                 items[i].className = 'item';
  15.             }
  16.             for (j = 0; j < points.length; j++) {
  17.                 points[j].className = 'point';
  18.             }
  19.         }
  20.  
  21.         //改变active方法
  22.         var goIndex = function () {
  23.             clearActive();
  24.             items[index].className = 'item active';
  25.             points[index].className = 'point active'
  26.         }
  27.         //左按钮事件
  28.         var goLeft = function () {
  29.             if (index == 0) {
  30.                 index = 4;
  31.             } else {
  32.                 index--;
  33.             }
  34.             goIndex();
  35.         }
  36.  
  37.         //右按钮事件
  38.         var goRight = function () {
  39.             if (index < 4) {
  40.                 index++;
  41.             } else {
  42.                 index = 0;
  43.             }
  44.             goIndex();
  45.         }
  46.         
  47.  
  48.         //绑定点击事件监听
  49.         left.addEventListener('click', function () {
  50.             goLeft();
  51.             time = 0;//计时器跳转清零
  52.         })
  53.  
  54.         right.addEventListener('click', function () {
  55.             goRight();
  56.             time = 0;//计时器跳转清零
  57.         })
  58.  
  59.         for(i = 0;i < points.length;i++){
  60.             points[i].addEventListener('click',function(){
  61.                 var pointIndex = this.getAttribute('data-index')
  62.                 index = pointIndex;
  63.                 goIndex();
  64.                 time = 0;//计时器跳转清零
  65.             })
  66.         }
  67.         //计时器轮播效果
  68.         var timer;
  69.         function play(){
  70.          timer = setInterval(() => {
  71.             time ++;
  72.             if(time == 20 ){
  73.                 goRight();
  74.                 time = 0;
  75.             }    
  76.         },100)
  77.     }
  78.         play();
  79.         //移入清除计时器
  80.         all.onmousemove = function(){
  81.             clearInterval(timer)
  82.         }
  83.        //移出启动计时器
  84.         all.onmouseleave = function(){
  85.             play();
  86.         }
  87.     </script>

总结：这个简单的轮播图实现例子是第一次写最容易理解，逻辑最清晰的一种。下面我把完整的代码块放出来，直接复制粘贴就可以运行。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <style>
  6.         .wrap {
  7.             width: 800px;
  8.             height: 400px;
  9.             position: relative;
  10.         }
  11.  
  12.         .list {
  13.             width: 800px;
  14.             height: 400px;
  15.             position: relative;
  16.             padding-left: 0px;
  17.         }
  18.  
  19.         .item {
  20.             width: 100%;
  21.             height: 100%;
  22.             list-style: none;
  23.             position: absolute;
  24.             left: 0;
  25.             opacity: 0;
  26.             transition: all .8s;
  27.         }
  28.  
  29.         .item:nth-child(1) {
  30.             background-color: skyblue;
  31.         }
  32.  
  33.         .item:nth-child(2) {
  34.             background-color: yellowgreen;
  35.         }
  36.  
  37.         .item:nth-child(3) {
  38.             background-color: rebeccapurple;
  39.         }
  40.  
  41.         .item:nth-child(4) {
  42.             background-color: pink;
  43.         }
  44.  
  45.         .item:nth-child(5) {
  46.             background-color: orange;
  47.         }
  48.  
  49.         .item.active {
  50.             z-index: 10;
  51.             opacity: 1;
  52.         }
  53.  
  54.         .btn {
  55.             width: 60px;
  56.             height: 100px;
  57.             z-index: 100;
  58.             top: 150px;
  59.             position: absolute;
  60.         }
  61.  
  62.         #leftBtn {
  63.             left: 0px;
  64.         }
  65.  
  66.         #rightBtn {
  67.             right: 0px;
  68.         }
  69.  
  70.         .pointList {
  71.             list-style: none;
  72.             padding-left: 0px;
  73.             position: absolute;
  74.             right: 20px;
  75.             bottom: 20px;
  76.             z-index: 200;
  77.         }
  78.  
  79.         .point {
  80.             width: 10px;
  81.             height: 10px;
  82.             background-color: antiquewhite;
  83.             border-radius: 100%;
  84.             float: left;
  85.             margin-right: 8px;
  86.             border-style: solid;
  87.             border-width: 2px;
  88.             border-color: slategray;
  89.             cursor: pointer;  
  90.         }
  91.  
  92.         .point.active{
  93.             background-color: cadetblue;
  94.         }
  95.     </style>
  96. </head>
  97.  
  98. <body>
  99.     <div class="wrap">
  100.         <ul class="list">
  101.             <li class="item active">0</li>
  102.             <li class="item">1</li>
  103.             <li class="item">2</li>
  104.             <li class="item">3</li>
  105.             <li class="item">4</li>
  106.         </ul>
  107.         <ul class="pointList">
  108.             <li class="point active" data-index = 0></li>
  109.             <li class="point" data-index = 1></li>
  110.             <li class="point" data-index = 2></li>
  111.             <li class="point" data-index = 3></li>
  112.             <li class="point" data-index = 4></li>
  113.         </ul>
  114.         <button class="btn" id="leftBtn"> < </button> 
  115.         <button class="btn" id="rightBtn"> > </button>
  116.  
  117.     </div>
  118.     <script>
  119.         var items = document.querySelectorAll(".item");//图片
  120.         var points = document.querySelectorAll(".point")//点
  121.         var left = document.getElementById("leftBtn");
  122.         var right = document.getElementById("rightBtn");
  123.         var all = document.querySelector(".wrap")
  124.         var index = 0;
  125.         var time = 0;//定时器跳转参数初始化
  126.         
  127.  
  128.         //清除active方法
  129.         var clearActive = function () {
  130.             for (i = 0; i < items.length; i++) {
  131.                 items[i].className = 'item';
  132.             }
  133.             for (j = 0; j < points.length; j++) {
  134.                 points[j].className = 'point';
  135.             }
  136.         }
  137.  
  138.         //改变active方法
  139.         var goIndex = function () {
  140.             clearActive();
  141.             items[index].className = 'item active';
  142.             points[index].className = 'point active'
  143.         }
  144.         //左按钮事件
  145.         var goLeft = function () {
  146.             if (index == 0) {
  147.                 index = 4;
  148.             } else {
  149.                 index--;
  150.             }
  151.             goIndex();
  152.         }
  153.  
  154.         //右按钮事件
  155.         var goRight = function () {
  156.             if (index < 4) {
  157.                 index++;
  158.             } else {
  159.                 index = 0;
  160.             }
  161.             goIndex();
  162.         }
  163.         
  164.  
  165.         //绑定点击事件监听
  166.         left.addEventListener('click', function () {
  167.             goLeft();
  168.             time = 0;//计时器跳转清零
  169.         })
  170.  
  171.         right.addEventListener('click', function () {
  172.             goRight();
  173.             time = 0;//计时器跳转清零
  174.         })
  175.  
  176.         for(i = 0;i < points.length;i++){
  177.             points[i].addEventListener('click',function(){
  178.                 var pointIndex = this.getAttribute('data-index')
  179.                 index = pointIndex;
  180.                 goIndex();
  181.                 time = 0;//计时器跳转清零
  182.             })
  183.         }
  184.         //计时器
  185.         var timer;
  186.         function play(){
  187.          timer = setInterval(() => {
  188.             time ++;
  189.             if(time == 20 ){
  190.                 goRight();
  191.                 time = 0;
  192.             }    
  193.         },100)
  194.     }
  195.         play();
  196.         //移入清除计时器
  197.         all.onmousemove = function(){
  198.             clearInterval(timer)
  199.         }
  200.        //移出启动计时器
  201.         all.onmouseleave = function(){
  202.             play();
  203.         }
  204.     </script>
  205. </body>
  206.  
  207. </html>

创作不易，觉得有帮助的话请留下一个赞谢谢~

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