西安最好的網(wǎng)站建設(shè)公司網(wǎng)絡(luò)營(yíng)銷網(wǎng)站分析
1、模態(tài)框(彈出框)
（1）、需求：
- 點(diǎn)擊彈出層，會(huì)彈出模態(tài)框，并且顯示灰色半透明的遮擋層
- 點(diǎn)擊關(guān)閉按鈕，可以關(guān)閉模態(tài)框，并且同時(shí)關(guān)閉半透明遮擋層
- 鼠標(biāo)放在模態(tài)框最上面一行，可以按住鼠標(biāo)拖拽模態(tài)框在頁(yè)面中移動(dòng)
- 鼠標(biāo)松開，可以停止拖動(dòng)模態(tài)框移動(dòng)
思路：
- 點(diǎn)擊彈出層，模態(tài)框和遮擋層就會(huì)顯示出來(lái) display:block
- 點(diǎn)擊關(guān)閉按鈕，模態(tài)框和遮罩層會(huì)隱藏起來(lái) display:none
- 在頁(yè)面中拖拽的原理：鼠標(biāo)按下并且移動(dòng)，之后松開鼠標(biāo)
- 觸發(fā)事件是鼠標(biāo)按下mousedown，鼠標(biāo)移動(dòng)mousemove 鼠標(biāo)松開 mouseup
- 拖拽過(guò)程，鼠標(biāo)移動(dòng)過(guò)程中，獲得最新的值賦值給模態(tài)框的left和top值，這樣模態(tài)框就可以跟著鼠標(biāo)走了
- 鼠標(biāo)按下觸發(fā)的事件源是h2
- 鼠標(biāo)的坐標(biāo)減去鼠標(biāo)內(nèi)的坐標(biāo)，才是模態(tài)框真正的位置
- 鼠標(biāo)按下，我們要得到鼠標(biāo)在盒子的坐標(biāo)
- 鼠標(biāo)移動(dòng)，就讓模態(tài)框的坐標(biāo)設(shè)置為：鼠標(biāo)坐標(biāo)減去盒子坐標(biāo)即可，注意移動(dòng)時(shí)間寫到按下
- 鼠標(biāo)松開，就停止拖拽，可以讓鼠標(biāo)移動(dòng)事件解除
（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>點(diǎn)擊，彈出模態(tài)框</h1><!-- 彈出框 --><div class="modal-box"><button>關(guān)閉</button><h2 class="title">我是一個(gè)可愛的模態(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、點(diǎn)擊顯示，隱藏模態(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）、當(dāng)我們鼠標(biāo)按下，就獲得鼠標(biāo)在盒子內(nèi)的坐標(biāo)title.addEventListener("mousedown", function (e) {var x = e.pageX - modalBox.offsetLeft;var y = e.pageY - modalBox.offsetTop;// (2)、鼠標(biāo)移動(dòng)的時(shí)候，把鼠標(biāo)在頁(yè)面中的坐標(biāo)，減去鼠標(biāo)在盒子內(nèi)的坐標(biāo)// 就是不斷的求modalBox.offsetLeft ，modalBox.offsetTop// 不能直接用offset// 直接用offset得到的是盒子本來(lái)的坐標(biāo)，盒子要?jiǎng)悠饋?lái)，才能改變offset的值，// 當(dāng)我們是想要先改變offset然后用他來(lái)改變盒子的位置，所以不能直接用offset// 而是用鼠標(biāo)的位置來(lái)動(dòng)態(tài)的輸入offsetfunction move(e) {modalBox.style.left = e.pageX - x + "px";modalBox.style.top = e.pageY - y + "px";// 這樣設(shè)置，會(huì)導(dǎo)致，初始化移動(dòng)時(shí)，就把鼠標(biāo)的位置，賦值給盒子的中心，有個(gè)跳躍的過(guò)程// modalBox.style.left = e.pageX + "px";// modalBox.style.top = e.pageY + "px";// modalBox.offsetLeft 是固定的值，不會(huì)變化的，需要先動(dòng)盒子才能得到新的modalBox.offsetLeft// modalBox.style.left = modalBox.offsetLeft + "px";// modalBox.style.top = modalBox.offsetTop + "px";}document.addEventListener("mousemove", move);// （3）、鼠標(biāo)彈起，就讓鼠標(biāo)移動(dòng)事件移除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);}// 點(diǎn)擊出現(xiàn)遮罩層clickH1Fun() {that.bg.style.display = "block";that.modalBox.style.display = "block";}// 點(diǎn)擊關(guān)閉按鈕btnFun() {that.bg.style.display = "none";that.modalBox.style.display = "none";}//鼠標(biāo)按下titletitleFun(e) {// 獲取鼠標(biāo)在模態(tài)框中的位置方式一let x = e.offsetX;let y = e.offsetY;// 獲取鼠標(biāo)在模態(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 值變化，由于過(guò)度約束，需要重新設(shè)置margin// that.modalBox.style.transform='translate(0%, 0%)'//left 值變化，由于過(guò)度約束，需要重新設(shè)置偏移量}document.addEventListener("mouseup", upFun);function upFun() {document.removeEventListener("mousemove", moveFun);}}}new Modal();</script>2、放大鏡
（1）html/css
-
- 整個(gè)案例可以分為三個(gè)功能模塊
- 鼠標(biāo)經(jīng)過(guò)小圖片盒子，黃色的遮罩層和大圖片盒子顯示，離開隱藏2個(gè)盒子功能
- 黃色的遮擋層跟隨鼠標(biāo)移動(dòng)功能
- 移動(dòng)黃色遮擋層，大圖片跟隨移動(dòng)功能
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綁定鼠標(biāo)移入移除事件，讓鼠標(biāo)移除時(shí)，放大鏡跟展示頁(yè)都消失camera.onmouseenter = function () {zoom.style.display = "block";bDiv.style.display = "block";};camera.onmouseleave = function () {// zoom.style.display = "none";// bDiv.style.display = "none";};// 2:設(shè)置放大鏡zoom能跟著鼠標(biāo)移動(dòng)，并設(shè)置范圍活動(dòng)camera.onmousemove = function (event) {//2.1 獲得鼠標(biāo)的頁(yè)面坐標(biāo)x,yvar x = event.pageX;var y = event.pageY;// console.log(x, y);//2.2 獲取圖相對(duì)于頁(yè)面的左邊，上邊相對(duì)距離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 計(jì)算遮擋物的xy坐標(biāo)var left = x - offsetX - zoomW / 2;var top = y - offsetY - zoomH / 2;// 2.5 設(shè)置判斷l(xiāng)eft top的限制值/* 遮蓋物的最大移動(dòng)距離，父元素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ù)比例移動(dòng)大圖 遮罩層的移動(dòng)距離 /遮罩層最大移動(dòng)距離 = 大圖片移動(dòng)距離/大圖片最大移動(dòng)距離根據(jù)上面的等式，可以演算出大圖片的移動(dòng)距離=（遮罩層的移動(dòng)距離 /遮罩層最大移動(dòng)距離）*大圖片最大移動(dòng)距離 *///3.1 計(jì)算大圖在大盒子里移動(dòng)的最大距離/* 大圖的寬度，減去bDiv框子的寬度*/var bImgMw = bImg.offsetWidth - bDiv.offsetWidth;var bImgMh = bImg.offsetHeight - bDiv.offsetHeight;// console.log(bDiv.offsetWidth);// 3.2 根據(jù)比例移動(dòng)大圖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;// 獲取整個(gè)盒子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、移入，放大鏡隨著鼠標(biāo)移動(dòng)this.camera.addEventListener("mousemove", that.zoomMove);//2、放大鏡移動(dòng)，大圖也隨著移動(dòng)this.camera.addEventListener("mousemove", that.bDivMove);}//1.2 鼠標(biāo)移入，顯示放大鏡及大圖showZoom() {that.zoom.style.display = "block";that.bDiv.style.display = "block";}hiddZoom() {that.zoom.style.display = "none";that.bDiv.style.display = "none";}// 1.2 放大鏡隨著鼠標(biāo)移動(dòng)zoomMove(e) {// 如果直接賦值，會(huì)出現(xiàn)閃爍，由于只有鼠標(biāo)動(dòng)了，才會(huì)獲取到offseX/Y的值，移動(dòng)之前為0// let left = e.offsetX;// let top = e.offsetY;// （1）、鼠標(biāo)在頁(yè)面中的坐標(biāo)var x = e.pageX;var y = e.pageY;//(2)、大盒子camera在在頁(yè)面中的位置var offsetLeft = that.camera.offsetLeft;var offsetTop = that.camera.offsetTop;//（3）、計(jì)算zoom的大小var zoomWidth = that.zoom.offsetWidth;var zoomHeight = that.zoom.offsetHeight;//（4）、計(jì)算盒子中鼠標(biāo)的位置that.left = x - offsetLeft - zoomWidth / 2;that.top = y - offsetTop - zoomHeight / 2;//(5)、限制放大鏡的移動(dòng)范圍，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)、將計(jì)算出的鼠標(biāo)位置賦值給zoomthat.zoom.style.left = that.left + "px";that.zoom.style.top = that.top + "px";}// 3、放大鏡移動(dòng)，大圖也隨著移動(dòng)// zoom移動(dòng)距離/zoom最大移動(dòng)距離 = 大圖移動(dòng)距離/大圖最大移動(dòng)距離bDivMove() {// 計(jì)算大圖的最大移動(dòng)距離 大圖-大圖盒子大小var bimgMaxWidth = that.bImg.offsetWidth - that.bDiv.offsetWidth;var bimgMaxHeight = that.bImg.offsetHeight - that.bDiv.offsetHeight;// 計(jì)算大圖移動(dòng)距離（zoom移動(dòng)距離/zoom最大移動(dòng)距離）*大圖最大移動(dòng)距離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、京東側(cè)邊導(dǎo)航條
需求：
-
- 原先側(cè)邊欄是絕對(duì)定位
- 當(dāng)頁(yè)面滾動(dòng)到一定位置，側(cè)邊欄改為固定定位
- 頁(yè)面繼續(xù)滾動(dòng)，會(huì)讓返回頂部顯示出來(lái)
思路：
-
- 需要用到頁(yè)面滾動(dòng)事件scroll，因?yàn)槭琼?yè)面滾動(dòng)，所以事件源是document
- 滾動(dòng)到某個(gè)位置，就是判斷頁(yè)面被卷去的上部值
- 頁(yè)面被卷去的頭部：可以通過(guò)window.pageYOffset獲得，如果是被卷去的左側(cè)window.pageXOffset
- 注意：元素被卷去的頭部是element.scrollTop,如果是頁(yè)面被卷去的頭部則是window.pageYOffset
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>側(cè)邊欄案例</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;// 側(cè)邊導(dǎo)航以上被卷去的距離var navTop = nav.offsetTop;console.log(navTop);// 2、頁(yè)面滾動(dòng)事件 scrolldocument.addEventListener("scroll", function () {// window.pageYOffset 獲取頁(yè)面被滾去的距離// 3、判斷距離，變化定位if (window.pageYOffset >= mainTop) {// 3.1將定位改成固定定位nav.style.position = "fixed";// 3.2 改成固定定位后，會(huì)有跳動(dòng)，需要重新設(shè)置定位的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）、搭建輪播圖的結(jié)構(gòu)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>輪播圖結(jié)構(gòu)</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><!-- 導(dǎo)航點(diǎn) class="active"--><div class="dot"><!-- <a href="#" ></a><a href="#"></a><a href="#"></a><a href="#"></a> --></div><!-- 左右導(dǎo)航 --><ol class="prevNext"><li class="prev"><a href="#"> <</a></li><li class="next"><a href="#">></a></li></ol></div></body>
</html>（2）、es5寫法
功能需求：
- 鼠標(biāo)經(jīng)過(guò)輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕
- 點(diǎn)擊右側(cè)按鈕一次，圖片往左播放一張，以此類推，左側(cè)按鈕同理
- 圖片播放的同時(shí)，下面的小圓圈模塊跟隨一起變化
- 點(diǎn)擊小圓圈，可以播放相應(yīng)圖片
- 鼠標(biāo)不經(jīng)過(guò)輪播圖，輪播圖也會(huì)自動(dòng)播放圖片
- 鼠標(biāo)經(jīng)過(guò)，輪播圖模塊，自動(dò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 鼠標(biāo)移入，左右按鈕出現(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 動(dòng)態(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、動(dòng)態(tài)的創(chuàng)建a標(biāo)簽var a = this.document.createElement("a");// 給a添加索引，方便下面計(jì)算點(diǎn)擊圓圈，移動(dòng)圖片a.setAttribute("index", i);// 2.3 插入節(jié)點(diǎn)dot.appendChild(a);}// 2.4 給第一個(gè)小點(diǎn)，設(shè)置選中樣式dot.children[0].className = "active";//需求3 給點(diǎn)擊的小圓圈加上類名 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 點(diǎn)擊小圓圈，移動(dòng)圖片 move(obj, attr, target, speed, callback)//4.1 獲取點(diǎn)擊a的索引，這個(gè)索引是創(chuàng)建a時(shí)添加的，用來(lái)表示每個(gè)avar index = this.getAttribute("index");// 4.2 ulL的移動(dòng)距離，小圓圈的索引號(hào)*圖片的寬度animation(ulL, -index * 590);// move(ulL, "left", -index * 590, 10);// 獲取到index后，需要同步賦值給下面的num跟current// 以便可以同步小圓點(diǎn)，跟點(diǎn)擊下一張的變化num = index;current = index;});}// 克隆第一張圖片,不在結(jié)構(gòu)里加// 循環(huán)生成小圓點(diǎn)的時(shí)候，還沒(méi)有克隆這個(gè)圖片。所有不會(huì)自動(dòng)生成的小圓圈var firstImg = ulL.children[0].cloneNode(true);ulL.appendChild(firstImg);//需求5 點(diǎn)擊左右按鈕，實(shí)現(xiàn)上下一張切換var num = 0;var current = 0; //用來(lái)標(biāo)記小圓圈next.addEventListener("click", function () {//無(wú)縫滾動(dòng) 如果走到了最后一張圖片，此時(shí)我們的ul要快速?gòu)?fù)原left改為0if (num >= ulL.children.length - 1) {ulL.style.left = 0;num = 0;}num++;animation(ulL, -num * 590);// move(ulL, "left", -num * 590, 20);// 點(diǎn)擊右側(cè)按鈕，小圓圈跟著跳動(dòng)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 左側(cè)按鈕的功能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);// 點(diǎn)擊右側(cè)按鈕，小圓圈跟著跳動(dòng)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 自動(dòng)播放功能var timer = setInterval(function () {// 手動(dòng)調(diào)用點(diǎn)擊事件next.click();}, 2000);//需求8 鼠標(biāo)移入，自動(dòng)播放停止outer.addEventListener("mouseenter", function () {clearInterval(timer);timer = null;});//需求9 鼠標(biāo)移出，重新開啟定時(shí)器outer.addEventListener("mouseleave", function () {timer = setInterval(function () {// 手動(dòng)調(diào)用點(diǎn)擊事件next.click();}, 2000);});
});（3）、es6寫法?
window.onload = function () {var that;class Swiper {constructor() {// 保存thisthat = this;// 1.1 獲取對(duì)應(yīng)元素this.prev = document.querySelector(".prev");this.next = document.querySelector(".next");this.outer = document.querySelector("#outer");//2.1 獲取導(dǎo)航點(diǎn)父元素this.dot = document.querySelector(".dot");this.imgList = document.querySelector(".imgList");// 2.4 調(diào)用創(chuàng)建小圓點(diǎn)函數(shù)this.creatDot();// 3.1 獲取圖片導(dǎo)航小圓點(diǎn)this.dots = document.querySelectorAll(".dot a");// 4.1 用于標(biāo)識(shí)當(dāng)前的圖片位置this.num = 0;this.current = 0; //用于標(biāo)識(shí)當(dāng)前小圓點(diǎn)的位置// 5、克隆輪播圖第一張照片this.cloneFirstImg();// 調(diào)用監(jiān)聽函數(shù)this.addevent();}// 所有監(jiān)聽函數(shù)addevent() {console.log(this);// 1.2 監(jiān)聽鼠標(biāo)是否移入this.outer.addEventListener("mouseenter", that.pervNextShow);this.outer.addEventListener("mouseleave", that.pervNextNode);// 3.3 監(jiān)聽是否點(diǎn)擊了小圓點(diǎn)for (var i = 0; i < this.dots.length; i++) {// 保存i值，方便找對(duì)應(yīng)的圖片this.dots[i].index = i;// 默認(rèn)第一個(gè)按鈕為選中狀態(tài)this.dots[0].className = "active";// 點(diǎn)擊切換背景色this.dots[i].addEventListener("click", that.updatBackgroundColor);// 點(diǎn)擊切換圖片this.dots[i].addEventListener("click", that.updatImg);}// 4、點(diǎn)擊nextthis.next.addEventListener("click", that.nextFun);// 5、點(diǎn)擊prevthis.prev.addEventListener("click", that.prevFun);// 8、調(diào)用自動(dòng)輪播函數(shù)this.timer = null; //定義標(biāo)識(shí)定時(shí)器this.autoPlay();// 9、移入outer，暫停自動(dòng)輪播this.outer.addEventListener("mouseenter", that.stopAutoPlay);// 10、移出outer，繼續(xù)自動(dòng)輪播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)建導(dǎo)航點(diǎn)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 點(diǎn)擊小圓點(diǎn)，切換顏色updatBackgroundColor(e) {// （1）、先解決默認(rèn)行為，超鏈接跳轉(zhuǎn)的問(wèn)題e.preventDefault();// (2)、點(diǎn)擊顏色切換for (var i = 0; i < that.dots.length; i++) {that.dots[i].className = "";}this.className = "active";}// 3.5 點(diǎn)擊小圓點(diǎn)，切換圖片updatImg() {// (3)、根據(jù)圖片導(dǎo)航點(diǎn)的索引移動(dòng)圖片animation(that.imgList, -590 * this.index);}// 4、點(diǎn)擊下一張，切換圖片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);// 點(diǎn)擊下一張照片后，更換小圓點(diǎn)背景色that.current++;if (that.current == that.dots.length) that.current = 0;//調(diào)用更換小圓點(diǎn)顏色函數(shù)that.changeBackgroundColor();}// 5、為解決輪播圖最后一張快速問(wèn)題，多賦值一張照片cloneFirstImg() {var firstImg = that.imgList.children[0].cloneNode(true);that.imgList.appendChild(firstImg);}// 6、更換小圓點(diǎn)顏色changeBackgroundColor() {for (var i = 0; i < that.dots.length; i++) {that.dots[i].className = "";}that.dots[that.current].className = "active";}// 7、點(diǎn)擊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);// 同步圖片小圓點(diǎn)的背景色if (that.current <= 0) {that.current = that.dots.length;}that.current--;//調(diào)用更換小圓點(diǎn)顏色函數(shù)that.changeBackgroundColor();}// 8、自動(dòng)輪播，每隔2s，調(diào)動(dòng)一次next函數(shù)autoPlay() {that.timer = setInterval(function () {that.nextFun();}, 2000);}// 9、鼠標(biāo)移入輪播圖，停止自動(dòng)輪播stopAutoPlay() {// console.log(that.timer);clearInterval(that.timer);that.timer = null;}// 10、鼠標(biāo)移出輪播圖，開始自動(dòng)輪播startAutoPlay() {that.autoPlay();}}new Swiper();
};（4）、節(jié)流閥優(yōu)化
防止輪播圖按鈕連續(xù)點(diǎn)擊造成播放過(guò)快
節(jié)流閥目的，當(dāng)上一個(gè)函數(shù)動(dòng)畫內(nèi)容執(zhí)行完畢，再去執(zhí)行下一個(gè)函數(shù)動(dòng)畫，讓事件無(wú)法連續(xù)觸發(fā)
核心實(shí)現(xiàn)思路：利用回調(diào)函數(shù)，添加一個(gè)變量來(lái)控制，鎖住函數(shù)和解鎖函數(shù)
開始設(shè)置一個(gè)變量 var flag =true
if（flag）{ flag = false,do something} 關(guān)閉水龍頭
利用回調(diào)函數(shù)動(dòng)畫執(zhí)行完畢， falg=true 打開水龍頭
// 10、節(jié)流閥優(yōu)化點(diǎn)擊過(guò)快問(wèn)題var flag = true;next.addEventListener("click", function () {if (flag) {flag = false; // 關(guān)閉水龍頭//無(wú)縫滾動(dòng) 如果走到了最后一張圖片，此時(shí)我們的ul要快速?gòu)?fù)原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);// 點(diǎn)擊右側(cè)按鈕，小圓圈跟著跳動(dòng)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 左側(cè)按鈕的功能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);// 點(diǎn)擊右側(cè)按鈕，小圓圈跟著跳動(dòng)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";}});?
?
?
?
?
?
?