定制软件开发js实现轮播图自动轮播

定制软件开发咱们今天看下怎么实现定制软件开发的自动轮播，用原生js，

一、思路

首先，定制软件开发我们要对要实现的功能定制软件开发有一个明确的认知，定制软件开发知道了功能才能够实现相应的逻辑
完整的轮播图需要具备的功能有：
1、点击左右浮块实现单张图片切换
2、在图片切换的同时底部圆点同时更新
3、点击圆点切换到对应的图片
定义一个图片切换函数，通过判断形参的类型，实现不同的切换需求，如果形参是布尔值，则实现单张图片切换，如果形参是下标，则实现多张图片切换，在图片切换的尾部调用圆点更新函数
圆点更新函数：同样判断形参的类型，如果是布尔值，每次跳变一个，如果是数字，则跳到对应的圆点，这里使用排他法更新小圆点。

html部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>轮播图之自动轮播</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.         
  15.         ul {
  16.             list-style: none;
  17.         }
  18.         
  19.         .box {
  20.             position: relative;
  21.             margin: 30px auto;
  22.             width: 600px;
  23.             height: 600px;
  24.             border: 1px solid red;
  25.         }
  26.         
  27.         #parent {
  28.             width: 600px;
  29.             height: 400px;
  30.             overflow: hidden;
  31.         }
  32.         
  33.         #child {
  34.             width: 2400px;
  35.             height: 400px;
  36.         }
  37.         
  38.         #child>img {
  39.             width: 600px;
  40.             height: 400px;
  41.             display: block;
  42.             float: left;
  43.         }
  44.         
  45.         #leftBtn,
  46.         #rightBtn {
  47.             position: absolute;
  48.             top: 170px;
  49.             width: 40px;
  50.             height: 60px;
  51.             background-color: black;
  52.             opacity: 0.3;
  53.             color: white;
  54.             text-align: center;
  55.             line-height: 60px;
  56.             font-size: 30px;
  57.         }
  58.         
  59.         #leftBtn {
  60.             left: 0;
  61.         }
  62.         
  63.         #rightBtn {
  64.             right: 0;
  65.         }
  66.         
  67.         #dotted {
  68.             position: absolute;
  69.             left: 60px;
  70.             top: 350px;
  71.             width: 120px;
  72.             height: 30px px;
  73.             border: 1px solid blue;
  74.         }
  75.         
  76.         #dotted>li {
  77.             float: left;
  78.             width: 30px;
  79.             height: 30px;
  80.             text-align: center;
  81.             line-height: 30px;
  82.             font-size: 20px;
  83.             box-sizing: border-box;
  84.         }
  85.         
  86.         #dotted>li:nth-child(2),
  87.         #dotted>li:nth-child(3),
  88.         #dotted>li:nth-child(4) {
  89.             border-left: 1px solid blue;
  90.         }
  91.     </style>
  92. </head>
  93.  
  94. <body>
  95.     <!-- 大盒子 -->
  96.     <div class="box">
  97.         <!-- 轮播图盒子 -->
  98.         <div id="parent">
  99.             <div id="child">
  100.                 <img src="images/1.jpg" alt="">
  101.                 <img src="images/2.jpg" alt="">
  102.                 <img src="images/3.jpg" alt="">
  103.                 <img src="images/4.jpg" alt="">
  104.             </div>
  105.         </div>
  106.         <!-- 左右按钮 -->
  107.         <div id="leftBtn">左</div>
  108.         <div id="rightBtn">右</div>
  109.         <!-- 四个小点 -->
  110.         <ul id="dotted">
  111.             <li style="background-color: red;">1</li>
  112.             <li>2</li>
  113.             <li>3</li>
  114.             <li>4</li>
  115.         </ul>
  116.     </div>
  117. </body>
  118.  
  119. </html>

js部分

  1. <script>
  2.     /*     轮播图的原理：
  3.         子元素的宽度是父元素的4倍， 向左滚动产生scrollLeft值，
  4.         隔一段时间， 让父元素的scrollLeft的值每次累加图片的width */
  5.  
  6.     var parent = document.getElementById("parent"); //轮播图父元素
  7.     var imgObj = document.getElementById("child").getElementsByTagName("img")[0]; //第一个张图片
  8.     var dottedArr = document.getElementById("dotted").getElementsByTagName("li");
  9.     var btnLeft = document.getElementById("leftBtn");
  10.     var rightBtn = document.getElementById("rightBtn");
  11.  
  12.     var num = 0; //控制整个轮播图
  13.     var timerClock = null;
  14.     clock();
  15.     // 封装一个自动轮播函数
  16.     // console.log(imgObj.clientWidth);
  17.     console.log(parent.scrollLeft);
  18.     // 0-3
  19.     function clock() {
  20.         /*  num++;
  21.          console.log(num); */
  22.         timerClock = setInterval(moveClock, 2000)
  23.     }
  24.  
  25.     function moveClock() {
  26.         num++;
  27.         if (num > 3) {
  28.             num = 0;
  29.         }
  30.         if (num < 0) {
  31.             num = 3;
  32.         }
  33.         // parent.scrollLeft = parent.scrollLeft + imgObj.clientWidth;
  34.         // parent.scrollLeft = imgObj.clientWidth * num;
  35.         // 调用慢点走的函数
  36.         slowMove(parent.scrollLeft, imgObj.clientWidth * num)
  37.             // 0
  38.             // 600
  39.             // 1200
  40.             // 1800
  41.             // 调用小点背景颜色改变
  42.         changeBgcolor();
  43.         console.log(parent.scrollLeft);
  44.  
  45.     }
  46.     // 实现缓慢轮播，parent.scrollLeft，每次走60px
  47.     function slowMove(start, end) {
  48.         var step = 0;
  49.         var stepMax = 10;
  50.         var everyStep = (end - start) / stepMax //每一步走60px
  51.         var timer = setInterval(function() {
  52.             step++;
  53.             if (step <= stepMax) {
  54.                 parent.scrollLeft = parent.scrollLeft + everyStep;
  55.             } else {
  56.                 clearInterval(timer);
  57.             }
  58.         }, 50)
  59.     }
  60.     // 单击四个小点实现轮播
  61.     // 给四个小点绑定单击事件，通过遍历循环方便
  62.     for (var i = 0; i < dottedArr.length; i++) {
  63.         dottedArr[i].onclick = function() {
  64.             console.log(this);
  65.             // 时间一直在走，2000毫秒，一直在消耗，单击前、单击时……   清除自动轮播计时器
  66.             clearInterval(timerClock); // timerClock is not defined
  67.             // 这个循环是判断一下单击时小点是否是当前的小点
  68.             for (var j = 0; j < dottedArr.length; j++) {
  69.                 if (this == dottedArr[j]) {
  70.                     console.log(j);
  71.                     // j:0-3
  72.                     num = j;
  73.                     slowMove(parent.scrollLeft, imgObj.clientWidth * num)
  74.                         // 调用小点背景颜色改变
  75.                     changeBgcolor();
  76.                 }
  77.             }
  78.             // 单击之后再次启用自动轮播
  79.             clock();
  80.         }
  81.  
  82.     }
  83.     // 声明一个小点背景色改变的函数
  84.     function changeBgcolor() {
  85.         for (var i = 0; i < dottedArr.length; i++) {
  86.             dottedArr[i].style.backgroundColor = "";
  87.         }
  88.         // num  0-3
  89.         // i    0-3
  90.         dottedArr[num].style.backgroundColor = "red";
  91.     }
  92.     // 单击右按钮
  93.     rightBtn.onclick = function() {
  94.             // num++;
  95.             clearInterval(timerClock); // timerClock is not defined
  96.             /*   num++;
  97.               if (num > 3) {
  98.                 num = 0;
  99.               }
  100.               slowMove(parent.scrollLeft, imgObj.clientWidth * num)
  101.               changeBgcolor(); */
  102.             moveClock()
  103.                 // 单击之后再次启用自动轮播
  104.             clock();
  105.         }
  106.         // 单击左按钮
  107.     leftBtn.onclick = function() {
  108.         clearInterval(timerClock); // timerClock is not defined
  109.         num -= 2;
  110.         moveClock()
  111.  
  112.         // 单击之后再次启用自动轮播
  113.         clock();
  114.     }
  115. </script>

相关知识点

1、获取DOM元素：
（1）document.getElementsById():通过id获取对象，id是唯一的，可以不获取。
（2）document.getElementsByClassName()：通过class属性获取对象。
（3）document.getElementsByTagName()：通过标签名获取对象。
（4）document.querySelectorAll():可通过所有获取。
2、鼠标事件

(1)onmouseover():鼠标移上时事件；
(2)onmouseout():鼠标移开时事件；

(3)onclick():单击事件。

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