當前位置：首頁 > news >正文

西安最好的網(wǎng)站建設公司網(wǎng)絡營銷網(wǎng)站分析

news 2025/7/8 3:55:13

西安最好的網(wǎng)站建設公司,網(wǎng)絡營銷網(wǎng)站分析,做購物類網(wǎng)站有哪些,wordpress建數(shù)據(jù)庫1、模態(tài)框(彈出框) （1）、需求： 點擊彈出層，會彈出模態(tài)框，并且顯示灰色半透明的遮擋層點擊關閉按鈕，可以關閉模態(tài)框，并且同時關閉半透明遮擋層鼠標放在模態(tài)框最上面一行，可以按住鼠…

1、模態(tài)框(彈出框)

（1）、需求：

點擊彈出層，會彈出模態(tài)框，并且顯示灰色半透明的遮擋層
點擊關閉按鈕，可以關閉模態(tài)框，并且同時關閉半透明遮擋層
鼠標放在模態(tài)框最上面一行，可以按住鼠標拖拽模態(tài)框在頁面中移動
鼠標松開，可以停止拖動模態(tài)框移動

思路：

點擊彈出層，模態(tài)框和遮擋層就會顯示出來 display:block
點擊關閉按鈕，模態(tài)框和遮罩層會隱藏起來 display:none
在頁面中拖拽的原理：鼠標按下并且移動，之后松開鼠標
觸發(fā)事件是鼠標按下mousedown，鼠標移動mousemove 鼠標松開 mouseup
拖拽過程，鼠標移動過程中，獲得最新的值賦值給模態(tài)框的left和top值，這樣模態(tài)框就可以跟著鼠標走了
鼠標按下觸發(fā)的事件源是h2
鼠標的坐標減去鼠標內(nèi)的坐標，才是模態(tài)框真正的位置
鼠標按下，我們要得到鼠標在盒子的坐標
鼠標移動，就讓模態(tài)框的坐標設置為：鼠標坐標減去盒子坐標即可，注意移動時間寫到按下
鼠標松開，就停止拖拽，可以讓鼠標移動事件解除

（2）、es5

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style>* {margin: 0;padding: 0;}h1 {cursor: pointer;margin: 50px auto;}/* 模態(tài)框 */.modal-box {display: none;width: 400px;height: 300px;background-color: #bfa;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 99;}button {position: absolute;right: 50px;top: 30px;width: 80px;line-height: 40px;}/* 遮罩層 */.bg {display: none;position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-color: #000;opacity: 0.3;}.title {background-color: aqua;line-height: 60px;}</style></head><body><h1>點擊，彈出模態(tài)框</h1><!-- 彈出框 --><div class="modal-box"><button>關閉</button><h2 class="title">我是一個可愛的模態(tài)框·····</h2></div><!-- 遮罩層 --><div class="bg"></div><!-- js --><script>// 1、獲取元素var h1 = document.querySelector("h1");var modalBox = document.querySelector(".modal-box");var btn = document.querySelector("button");var bg = document.querySelector(".bg");var title = document.querySelector(".title");// 2、點擊顯示，隱藏模態(tài)框h1.onclick = function () {modalBox.style.display = "block";bg.style.display = "block";};btn.onclick = function () {modalBox.style.display = "none";bg.style.display = "none";};// 3、開始拖拽模態(tài)框//（1）、當我們鼠標按下，就獲得鼠標在盒子內(nèi)的坐標title.addEventListener("mousedown", function (e) {var x = e.pageX - modalBox.offsetLeft;var y = e.pageY - modalBox.offsetTop;//  (2)、鼠標移動的時候，把鼠標在頁面中的坐標，減去鼠標在盒子內(nèi)的坐標// 就是不斷的求modalBox.offsetLeft ，modalBox.offsetTop// 不能直接用offset// 直接用offset得到的是盒子本來的坐標，盒子要動起來，才能改變offset的值，// 當我們是想要先改變offset然后用他來改變盒子的位置，所以不能直接用offset// 而是用鼠標的位置來動態(tài)的輸入offsetfunction move(e) {modalBox.style.left = e.pageX - x + "px";modalBox.style.top = e.pageY - y + "px";// 這樣設置，會導致，初始化移動時，就把鼠標的位置，賦值給盒子的中心，有個跳躍的過程// modalBox.style.left = e.pageX  + "px";// modalBox.style.top = e.pageY  + "px";// modalBox.offsetLeft 是固定的值，不會變化的，需要先動盒子才能得到新的modalBox.offsetLeft// modalBox.style.left = modalBox.offsetLeft + "px";// modalBox.style.top = modalBox.offsetTop + "px";}document.addEventListener("mousemove", move);// （3）、鼠標彈起，就讓鼠標移動事件移除document.addEventListener("mouseup", function () {document.removeEventListener("mousemove", move);});});</script></body>
</html>

（3）、es6

<script>let that;class Modal {constructor() {that = this;// 獲取元素this.clickH1 = document.getElementById("clickH1");this.btn = document.getElementById("btn");this.modalBox = document.querySelector(".modal-box");this.bg = document.querySelector(".bg");this.title = document.querySelector(".title");// 調(diào)用監(jiān)聽函數(shù)this.event();}// 監(jiān)聽函數(shù)event() {this.clickH1.addEventListener("click", this.clickH1Fun);this.btn.addEventListener("click", this.btnFun);this.title.addEventListener("mousedown", this.titleFun);}// 點擊出現(xiàn)遮罩層clickH1Fun() {that.bg.style.display = "block";that.modalBox.style.display = "block";}// 點擊關閉按鈕btnFun() {that.bg.style.display = "none";that.modalBox.style.display = "none";}//鼠標按下titletitleFun(e) {// 獲取鼠標在模態(tài)框中的位置方式一let x = e.offsetX;let y = e.offsetY;// 獲取鼠標在模態(tài)框中的位置方式二// let x = e.pageX - that.modalBox.offsetLeft;// let y = e.pageY - that.modalBox.offsetTop;console.log(x, y);document.addEventListener("mousemove", moveFun);function moveFun(e) {// console.log(111);let left = e.pageX - x;let right = e.pageY - y;that.modalBox.style.left = left + "px";that.modalBox.style.top = right + "px";that.modalBox.style.margin = 0; //left 值變化，由于過度約束，需要重新設置margin// that.modalBox.style.transform='translate(0%, 0%)'//left 值變化，由于過度約束，需要重新設置偏移量}document.addEventListener("mouseup", upFun);function upFun() {document.removeEventListener("mousemove", moveFun);}}}new Modal();</script>

2、放大鏡

（1）html/css

1. 整個案例可以分為三個功能模塊
2. 鼠標經(jīng)過小圖片盒子，黃色的遮罩層和大圖片盒子顯示，離開隱藏2個盒子功能
3. 黃色的遮擋層跟隨鼠標移動功能
4. 移動黃色遮擋層，大圖片跟隨移動功能

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>放大鏡案例</title><style>* {margin: 0;padding: 0;}/* 小圖 */.camera {width: 300px;height: 300px;position: relative;border: 1px solid black;}.cameraImg img {width: 300px;height: 300px;}/* 遮罩層 */.zoom {width: 100px;height: 100px;background-color: #ccc;opacity: 0.8;position: absolute;top: 0px;left: 0px;}/* 大圖 */.bDiv {width: 500px;height: 500px;background-color: bisque;position: absolute;left: 350px;top: 0;overflow: hidden;}.bImg {position: absolute;top: 0;left: 0;}</style></head><body><div class="camera"><!-- 小圖 --><div class="cameraImg"><img src="./img0.jpg" alt="" /></div><!-- 放大鏡 --><div class="zoom"></div><!-- 大圖 --><div class="bDiv"><img src="./img1.jpg" alt="" class="bImg" /></div></div><!-- 引入js --><script src="./放大鏡.js"></script></body>
</html>

（2）、es5 js?

window.onload = function () {var camera = document.querySelector(".camera");var zoom = document.querySelector(".zoom");var bDiv = document.querySelector(".bDiv");var bImg = document.querySelector(".bImg");// 1:給camera綁定鼠標移入移除事件，讓鼠標移除時，放大鏡跟展示頁都消失camera.onmouseenter = function () {zoom.style.display = "block";bDiv.style.display = "block";};camera.onmouseleave = function () {// zoom.style.display = "none";// bDiv.style.display = "none";};// 2:設置放大鏡zoom能跟著鼠標移動，并設置范圍活動camera.onmousemove = function (event) {//2.1 獲得鼠標的頁面坐標x,yvar x = event.pageX;var y = event.pageY;// console.log(x, y);//2.2 獲取圖相對于頁面的左邊，上邊相對距離var offsetX = camera.offsetLeft;var offsetY = camera.offsetTop;// console.log(offsetX, offsetY);// 2.3 獲取遮擋層的寬度跟高度var zoomW = zoom.offsetWidth;var zoomH = zoom.offsetHeight;// console.log(zoomW,zoomH);// 2.4 計算遮擋物的xy坐標var left = x - offsetX - zoomW / 2;var top = y - offsetY - zoomH / 2;// 2.5 設置判斷l(xiāng)eft  top的限制值/* 遮蓋物的最大移動距離，父元素camera的寬度減去遮蓋物的寬度(300-100) */if (left >= 200) {left = 200;}if (left <= 0) {left = 0;}if (top >= 200) {top = 200;}if (top <= 0) {top = 0;}//2.6 將寬高賦值給放大鏡zoom.style.left = left + "px";zoom.style.top = top + "px";/* 3、根據(jù)比例移動大圖  遮罩層的移動距離 /遮罩層最大移動距離 = 大圖片移動距離/大圖片最大移動距離根據(jù)上面的等式，可以演算出大圖片的移動距離=（遮罩層的移動距離 /遮罩層最大移動距離）*大圖片最大移動距離 *///3.1 計算大圖在大盒子里移動的最大距離/* 大圖的寬度，減去bDiv框子的寬度*/var bImgMw = bImg.offsetWidth - bDiv.offsetWidth;var bImgMh = bImg.offsetHeight - bDiv.offsetHeight;// console.log(bDiv.offsetWidth);// 3.2 根據(jù)比例移動大圖var bX = (left / 200) * bImgMw;var bY = (top / 200) * bImgMh;// 3.3 將bX，bY賦值給大圖的寬高bImg.style.left = -bX + "px";bImg.style.top = -bY + "px";};
};

（3）、es6.js?

window.onload = function () {var that;class Camera {constructor() {// 保存thisthat = this;// 獲取整個盒子this.camera = document.querySelector(".camera");this.zoom = document.querySelector(".zoom");this.bDiv = document.querySelector(".bDiv");this.bImg = document.querySelector(".bImg");//初始化放大鏡的位置left，topthis.left = 0;this.top = 0;//初始化監(jiān)聽函數(shù)this.addevent();}// 監(jiān)聽事件addevent() {//1.1、移入顯示放大鏡，移出隱藏放大鏡this.camera.addEventListener("mouseenter", that.showZoom);this.camera.addEventListener("mouseleave", that.hiddZoom);//2、移入，放大鏡隨著鼠標移動this.camera.addEventListener("mousemove", that.zoomMove);//2、放大鏡移動，大圖也隨著移動this.camera.addEventListener("mousemove", that.bDivMove);}//1.2 鼠標移入，顯示放大鏡及大圖showZoom() {that.zoom.style.display = "block";that.bDiv.style.display = "block";}hiddZoom() {that.zoom.style.display = "none";that.bDiv.style.display = "none";}// 1.2 放大鏡隨著鼠標移動zoomMove(e) {// 如果直接賦值，會出現(xiàn)閃爍，由于只有鼠標動了，才會獲取到offseX/Y的值，移動之前為0// let left = e.offsetX;// let top = e.offsetY;// （1）、鼠標在頁面中的坐標var x = e.pageX;var y = e.pageY;//(2)、大盒子camera在在頁面中的位置var offsetLeft = that.camera.offsetLeft;var offsetTop = that.camera.offsetTop;//（3）、計算zoom的大小var zoomWidth = that.zoom.offsetWidth;var zoomHeight = that.zoom.offsetHeight;//（4）、計算盒子中鼠標的位置that.left = x - offsetLeft - zoomWidth / 2;that.top = y - offsetTop - zoomHeight / 2;//(5)、限制放大鏡的移動范圍，camera-zoomif (that.left <= 0) {that.left = 0;}if (that.left >= 200) {that.left = 200;}if (that.top <= 0) {that.top = 0;}if (that.top >= 200) {that.top = 200;}//(6)、將計算出的鼠標位置賦值給zoomthat.zoom.style.left = that.left + "px";that.zoom.style.top = that.top + "px";}// 3、放大鏡移動，大圖也隨著移動// zoom移動距離/zoom最大移動距離 = 大圖移動距離/大圖最大移動距離bDivMove() {// 計算大圖的最大移動距離  大圖-大圖盒子大小var bimgMaxWidth = that.bImg.offsetWidth - that.bDiv.offsetWidth;var bimgMaxHeight = that.bImg.offsetHeight - that.bDiv.offsetHeight;// 計算大圖移動距離（zoom移動距離/zoom最大移動距離）*大圖最大移動距離var bimgLeft = (that.left / 200) * bimgMaxWidth;var bimgTop = (that.top / 200) * bimgMaxHeight;that.bImg.style.left = -bimgLeft + "px";that.bImg.style.top = -bimgTop + "px";}}new Camera();
};

3、京東側邊導航條

需求：

1. 原先側邊欄是絕對定位
2. 當頁面滾動到一定位置，側邊欄改為固定定位
3. 頁面繼續(xù)滾動，會讓返回頂部顯示出來

思路：

1. 需要用到頁面滾動事件scroll，因為是頁面滾動，所以事件源是document
2. 滾動到某個位置，就是判斷頁面被卷去的上部值
3. 頁面被卷去的頭部：可以通過window.pageYOffset獲得，如果是被卷去的左側window.pageXOffset
4. 注意：元素被卷去的頭部是element.scrollTop,如果是頁面被卷去的頭部則是window.pageYOffset

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>側邊欄案例</title><style>* {padding: 0;margin: 0;}header,footer {width: 1000px;height: 200px;background-color: pink;margin: 0 auto;}main {width: 1000px;height: 800px;background-color: #bfa;margin: 0 auto;}nav {width: 60px;height: 200px;background-color: blue;position: absolute;right: 0;top: 250px;line-height: 30px;}span {display: block;width: 60px;height: 60px;background-color: red;margin-top: 140px;text-align: center;display: none;}</style></head><body><header>頭部</header><nav><span>返回 <br />頂部</span></nav><main>主體</main><footer>底部</footer><script>// 1、獲取元素var span = document.querySelector("span");var nav = document.querySelector("nav");var main = document.querySelector("main");// 主體以上被卷去的距離var mainTop = main.offsetTop;// 側邊導航以上被卷去的距離var navTop = nav.offsetTop;console.log(navTop);// 2、頁面滾動事件 scrolldocument.addEventListener("scroll", function () {// window.pageYOffset 獲取頁面被滾去的距離// 3、判斷距離，變化定位if (window.pageYOffset >= mainTop) {// 3.1將定位改成固定定位nav.style.position = "fixed";// 3.2 改成固定定位后，會有跳動，需要重新設置定位的top值,否則還是原值nav.style.top = navTop - mainTop + "px";// 3.3 出現(xiàn)返回頂部字樣span.style.display = "block";} else {nav.style.position = "absolute";nav.style.top = "300px";span.style.display = "none";}});</script></body>
</html>

4、輪播圖

（1）、搭建輪播圖的結構

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>輪播圖結構</title><!-- <script src="../js/tools.js"></script> --><script src="../js/animation.js"></script><script src="./01.輪播圖.js"></script><style>* {padding: 0;margin: 0;list-style: none;text-decoration: none;}#outer {width: 590px;height: 470px;border: 10px solid red;margin: 50px auto;position: relative;overflow: hidden;}#outer > ul {width: 500%;position: absolute;left: 0;top: 0;}#outer > ul > li {float: left;}.dot {position: absolute;bottom: 30px;left: 50%;transform: translate(-50%, -50%);}.dot > a {display: inline-block;width: 15px;height: 15px;border-radius: 50%;background-color: #999;margin: 0 5px;}.dot > .active,.dot > a:hover {background-color: orange;}.prev,.next {width: 40px;height: 40px;background-color: rgba(0, 0, 0, 0.4);text-align: center;position: absolute;font-size: 30px;color: #999;/* 隱藏左右按鈕 */display: none;}.prev > a,.next > a {color: #fff;}.prev {left: 10px;top: 42%;}.next {right: 10px;top: 42%;}</style></head><body><div id="outer"><!-- 圖片部分 --><ul><li><a href="#"><img src="./img/1.jpg" alt="" /></a></li><li><a href="#"><img src="./img/2.jpg" alt="" /></a></li><li><a href="#"><img src="./img/3.jpg" alt="" /></a></li><li><a href="#"><img src="./img/4.jpg" alt="" /></a></li><!-- <li><a href="#"><img src="./img/1.jpg" alt="" /></a></li> --></ul><!-- 導航點  class="active"--><div class="dot"><!-- <a href="#" ></a><a href="#"></a><a href="#"></a><a href="#"></a> --></div><!-- 左右導航 --><ol class="prevNext"><li class="prev"><a href="#"> &lt;</a></li><li class="next"><a href="#">&gt;</a></li></ol></div></body>
</html>

（2）、es5寫法

功能需求：

鼠標經(jīng)過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕
點擊右側按鈕一次，圖片往左播放一張，以此類推，左側按鈕同理
圖片播放的同時，下面的小圓圈模塊跟隨一起變化
點擊小圓圈，可以播放相應圖片
鼠標不經(jīng)過輪播圖，輪播圖也會自動播放圖片
鼠標經(jīng)過，輪播圖模塊，自動播放停止

es5寫法

window.addEventListener("load", function () {var prev = this.document.querySelector(".prev");var next = this.document.querySelector(".next");var outer = this.document.querySelector("#outer");//需求1 鼠標移入，左右按鈕出現(xiàn)隱藏outer.addEventListener("mouseenter", function () {prev.style.display = "block";next.style.display = "block";});outer.addEventListener("mouseleave", function () {prev.style.display = "none";next.style.display = "none";});//需求2 動態(tài)生成pot，小圓圈// 2.1、獲取元素var ulL = outer.querySelector("ul");var dot = outer.querySelector(".dot");for (var i = 0; i < ulL.children.length; i++) {// 2.2、動態(tài)的創(chuàng)建a標簽var a = this.document.createElement("a");// 給a添加索引，方便下面計算點擊圓圈，移動圖片a.setAttribute("index", i);// 2.3 插入節(jié)點dot.appendChild(a);}// 2.4 給第一個小點，設置選中樣式dot.children[0].className = "active";//需求3  給點擊的小圓圈加上類名 active  排他思想var as = dot.querySelectorAll("a");for (var i = 0; i < as.length; i++) {as[i].addEventListener("click", function () {for (var j = 0; j < as.length; j++) {dot.children[j].className = "";}this.className = "active";//需求4   點擊小圓圈，移動圖片 move(obj, attr, target, speed, callback)//4.1  獲取點擊a的索引，這個索引是創(chuàng)建a時添加的，用來表示每個avar index = this.getAttribute("index");// 4.2 ulL的移動距離，小圓圈的索引號*圖片的寬度animation(ulL, -index * 590);// move(ulL, "left", -index * 590, 10);// 獲取到index后，需要同步賦值給下面的num跟current// 以便可以同步小圓點，跟點擊下一張的變化num = index;current = index;});}// 克隆第一張圖片,不在結構里加// 循環(huán)生成小圓點的時候，還沒有克隆這個圖片。所有不會自動生成的小圓圈var firstImg = ulL.children[0].cloneNode(true);ulL.appendChild(firstImg);//需求5  點擊左右按鈕，實現(xiàn)上下一張切換var num = 0;var current = 0; //用來標記小圓圈next.addEventListener("click", function () {//無縫滾動  如果走到了最后一張圖片，此時我們的ul要快速復原left改為0if (num >= ulL.children.length - 1) {ulL.style.left = 0;num = 0;}num++;animation(ulL, -num * 590);// move(ulL, "left", -num * 590, 20);// 點擊右側按鈕，小圓圈跟著跳動current++;// 如果curent的數(shù)值跟小圓圈的數(shù)量一樣，走到了克隆的那張圖片，要還原為0if (current == dot.children.length) {current = 0;}for (var i = 0; i < dot.children.length; i++) {dot.children[i].className = "";}dot.children[current].className = "active";});//需求6  左側按鈕的功能prev.addEventListener("click", function () {if (num == 0) {num = ulL.children.length - 1;ulL.style.left = -num * 590 + "px";}num--;animation(ulL, -num * 590);// move(ulL, "left", -num * 590, 20);// 點擊右側按鈕，小圓圈跟著跳動current--;// 如果curent的數(shù)值跟小圓圈的數(shù)量一樣，要還原為0if (current < 0) {current = dot.children.length - 1;}for (var i = 0; i < dot.children.length; i++) {dot.children[i].className = "";}dot.children[current].className = "active";});//需求7  自動播放功能var timer = setInterval(function () {// 手動調(diào)用點擊事件next.click();}, 2000);//需求8  鼠標移入，自動播放停止outer.addEventListener("mouseenter", function () {clearInterval(timer);timer = null;});//需求9  鼠標移出，重新開啟定時器outer.addEventListener("mouseleave", function () {timer = setInterval(function () {// 手動調(diào)用點擊事件next.click();}, 2000);});
});

（3）、es6寫法?

window.onload = function () {var that;class Swiper {constructor() {// 保存thisthat = this;// 1.1 獲取對應元素this.prev = document.querySelector(".prev");this.next = document.querySelector(".next");this.outer = document.querySelector("#outer");//2.1 獲取導航點父元素this.dot = document.querySelector(".dot");this.imgList = document.querySelector(".imgList");//   2.4 調(diào)用創(chuàng)建小圓點函數(shù)this.creatDot();//   3.1 獲取圖片導航小圓點this.dots = document.querySelectorAll(".dot a");//   4.1 用于標識當前的圖片位置this.num = 0;this.current = 0; //用于標識當前小圓點的位置//   5、克隆輪播圖第一張照片this.cloneFirstImg();// 調(diào)用監(jiān)聽函數(shù)this.addevent();}// 所有監(jiān)聽函數(shù)addevent() {console.log(this);// 1.2 監(jiān)聽鼠標是否移入this.outer.addEventListener("mouseenter", that.pervNextShow);this.outer.addEventListener("mouseleave", that.pervNextNode);//  3.3 監(jiān)聽是否點擊了小圓點for (var i = 0; i < this.dots.length; i++) {// 保存i值，方便找對應的圖片this.dots[i].index = i;// 默認第一個按鈕為選中狀態(tài)this.dots[0].className = "active";// 點擊切換背景色this.dots[i].addEventListener("click", that.updatBackgroundColor);// 點擊切換圖片this.dots[i].addEventListener("click", that.updatImg);}//   4、點擊nextthis.next.addEventListener("click", that.nextFun);//   5、點擊prevthis.prev.addEventListener("click", that.prevFun);//   8、調(diào)用自動輪播函數(shù)this.timer = null; //定義標識定時器this.autoPlay();// 9、移入outer，暫停自動輪播this.outer.addEventListener("mouseenter", that.stopAutoPlay);//   10、移出outer，繼續(xù)自動輪播this.outer.addEventListener("mouseleave", that.startAutoPlay);}// 所有功能函數(shù)// 注意函數(shù)中的this指向// 1.3 上下一張出現(xiàn)pervNextShow() {that.prev.style.display = "block";that.next.style.display = "block";}pervNextNode() {that.prev.style.display = "none";that.next.style.display = "none";}// 2、根據(jù)圖片創(chuàng)建導航點creatDot() {var imgNum = this.imgList.children.length;for (var i = 0; i < imgNum; i++) {var a = `<a href="#" ></a>`;this.dot.insertAdjacentHTML("afterBegin", a);}}// 3.4 點擊小圓點，切換顏色updatBackgroundColor(e) {// （1）、先解決默認行為，超鏈接跳轉(zhuǎn)的問題e.preventDefault();//  (2)、點擊顏色切換for (var i = 0; i < that.dots.length; i++) {that.dots[i].className = "";}this.className = "active";}// 3.5 點擊小圓點，切換圖片updatImg() {//  (3)、根據(jù)圖片導航點的索引移動圖片animation(that.imgList, -590 * this.index);}// 4、點擊下一張，切換圖片nextFun() {// 根據(jù)num的值，判斷num是否++var len = that.imgList.children.length;if (that.num >= len - 1) {that.imgList.style.left = 0;that.num = 0;}that.num++;animation(that.imgList, -that.num * 590);// 點擊下一張照片后，更換小圓點背景色that.current++;if (that.current == that.dots.length) that.current = 0;//調(diào)用更換小圓點顏色函數(shù)that.changeBackgroundColor();}// 5、為解決輪播圖最后一張快速問題，多賦值一張照片cloneFirstImg() {var firstImg = that.imgList.children[0].cloneNode(true);that.imgList.appendChild(firstImg);}// 6、更換小圓點顏色changeBackgroundColor() {for (var i = 0; i < that.dots.length; i++) {that.dots[i].className = "";}that.dots[that.current].className = "active";}// 7、點擊prev，上一張照片prevFun() {// 根據(jù)num的值，判斷顯示圖片if (that.num == 0) {that.num = that.imgList.children.length - 1;that.imgList.style.left = -that.num * 590 + "px";}that.num--;animation(that.imgList, -that.num * 590);//  同步圖片小圓點的背景色if (that.current <= 0) {that.current = that.dots.length;}that.current--;//調(diào)用更換小圓點顏色函數(shù)that.changeBackgroundColor();}// 8、自動輪播，每隔2s，調(diào)動一次next函數(shù)autoPlay() {that.timer = setInterval(function () {that.nextFun();}, 2000);}// 9、鼠標移入輪播圖，停止自動輪播stopAutoPlay() {//   console.log(that.timer);clearInterval(that.timer);that.timer = null;}// 10、鼠標移出輪播圖，開始自動輪播startAutoPlay() {that.autoPlay();}}new Swiper();
};

（4）、節(jié)流閥優(yōu)化

防止輪播圖按鈕連續(xù)點擊造成播放過快

節(jié)流閥目的，當上一個函數(shù)動畫內(nèi)容執(zhí)行完畢，再去執(zhí)行下一個函數(shù)動畫，讓事件無法連續(xù)觸發(fā)

核心實現(xiàn)思路：利用回調(diào)函數(shù)，添加一個變量來控制，鎖住函數(shù)和解鎖函數(shù)

開始設置一個變量 var flag =true

if（flag）{ flag = false,do something} 關閉水龍頭

利用回調(diào)函數(shù)動畫執(zhí)行完畢， falg=true 打開水龍頭

  // 10、節(jié)流閥優(yōu)化點擊過快問題var flag = true;next.addEventListener("click", function () {if (flag) {flag = false; // 關閉水龍頭//無縫滾動  如果走到了最后一張圖片，此時我們的ul要快速復原left改為0if (num >= ulL.children.length - 1) {ulL.style.left = 0;num = 0;}num++;animation(ulL, -num * 590, function () {flag = true;});// move(ulL, "left", -num * 590, 20);// 點擊右側按鈕，小圓圈跟著跳動current++;// 如果curent的數(shù)值跟小圓圈的數(shù)量一樣，走到了克隆的那張圖片，要還原為0if (current == dot.children.length) {current = 0;}for (var i = 0; i < dot.children.length; i++) {dot.children[i].className = "";}dot.children[current].className = "active";}});//需求6  左側按鈕的功能prev.addEventListener("click", function () {if (flag) {flag = false;if (num == 0) {num = ulL.children.length - 1;ulL.style.left = -num * 590 + "px";}num--;animation(ulL, -num * 590, function () {flag = true;});// move(ulL, "left", -num * 590, 20);// 點擊右側按鈕，小圓圈跟著跳動current--;// 如果curent的數(shù)值跟小圓圈的數(shù)量一樣，要還原為0if (current < 0) {current = dot.children.length - 1;}for (var i = 0; i < dot.children.length; i++) {dot.children[i].className = "";}dot.children[current].className = "active";}});