您好,登錄后才能下訂單哦!
小編給大家分享一下如何使用JavaScript實(shí)現(xiàn)帶有子菜單和控件的slider輪播圖效果,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
具體實(shí)現(xiàn)代碼如下所示:
實(shí)現(xiàn)效果:
實(shí)現(xiàn)原理:
// 步驟
// 1. 獲取事件源以及相關(guān)元素
// 2. 復(fù)制第一張圖片所在的li,添加到ul的最后面
// 3. 給ol添加li,ul中的個(gè)數(shù)-1個(gè),并點(diǎn)亮第一個(gè)按鈕
// 4. 鼠標(biāo)放到ol的li上切換圖片
// 5. 添加定時(shí)器
// 6. 左右切換圖片(鼠標(biāo)放上去隱藏,移開顯示)
實(shí)現(xiàn)代碼:
<!DOCTYPE html> <html> <head> <title>輪播圖</title> <meta charset="utf-8"> <style type="text/css"> *{ padding: 0; margin: 0; list-style: none; border: 0; } .all{ width: 500px; height: 200px; padding: 7px; margin: 100px auto; position: relative; box-shadow: 1px 1px 5px #2d2d2d; } .screen{ width: 500px; height: 200px; overflow: hidden; position: relative; } .screen li{ width: 500px; height: 200px; overflow: hidden; float: left; } .screen ul{ position: absolute; left: 0; top: 0; width: 3000px; } .all ol{ position: absolute; right: 10px; bottom: 10px; line-height: 20px; text-align: center; } .all ol li{ float: left; width: 20px; height: 20px; text-align: center; background-color: #fff; border: 1px solid #ccc; margin-left: 10px; cursor: pointer; } .all ol li.current{ background-color: #03c03c; } #arr{ display: none; } #arr span{ width: 40px; height: 40px; left: 5px; top: 50%; position: absolute; margin-top: -20px; background-color: #000; cursor: pointer; line-height: 35px; text-align: center; font-weight: bold; font-family: "微軟雅黑"; font-size: 30px; color: #fff; opacity: 0.3; border-radius: 50%; box-shadow: 1px 1px 3px #2d2d2d; } #arr #right{ right: 5px; left: auto; } </style> </head> <body> <div class="all" id="all"> <div class="screen" id="screen"> <ul id="ul"> <li><img src="./images/01.jpg" width="500" height="200"></li> <li><img src="./images/02.jpg" width="500" height="200"></li> <li><img src="./images/03.jpg" width="500" height="200"></li> <li><img src="./images/04.jpg" width="500" height="200"></li> <li><img src="./images/05.jpg" width="500" height="200"></li> </ul> <!-- 圖片子菜單 --> <ol> </ol> <!-- 左右切換按鈕 --> <div id="arr"> <span id="left"><</span> <span id="right">></span> </div> </div> </div> <!-- script --> <script type="text/javascript"> // 賦值第一張圖片放到ul的最后,當(dāng)圖片切換到第五張的時(shí)候,直接切換第六張,再從第一張切換到第二張的時(shí)候先瞬間切換到第一張圖片,然后滑倒第二張 // 步驟 // 1. 獲取事件源以及相關(guān)元素 // 2. 復(fù)制第一張圖片所在的li,添加到ul的最后面 // 3. 給ol添加li,ul中的個(gè)數(shù)-1個(gè),并點(diǎn)亮第一個(gè)按鈕 // 4. 鼠標(biāo)放到ol的li上切換圖片 // 5. 添加定時(shí)器 // 6. 左右切換圖片(鼠標(biāo)放上去隱藏,移開顯示) // 1. 獲取事件源以及相關(guān)元素 var all = document.getElementById("all"); var screen = all.firstElementChild || all.firstChild; var imgWidth = screen.offsetWidth; var ul = screen.firstElementChild || screen.firstChild; var ol = screen.children[1]; var div = screen.lastElementChild || screen.lastChild; var spanArr = div.children; // 2. 復(fù)制第一張圖片所在的li,添加到ul的最后面 var ulNewLi = ul.children[0].cloneNode(true); ul.appendChild(ulNewLi); // 3. 給ol添加li,ul中的個(gè)數(shù)-1個(gè),并點(diǎn)亮第一個(gè)按鈕 for(var i=0; i<ul.children.length-1; i++){ var olNewLi = document.createElement("li"); olNewLi.innerHTML = i+1; ol.appendChild(olNewLi); } var olLiArr = ol.children; olLiArr[0].className = "current"; // 4. 鼠標(biāo)放到ol的li上切換圖片 for(var i=0; i<olLiArr.length; i++){ // 自定義屬性,把索引值綁定到元素的index屬性上 olLiArr[i].index = i; olLiArr[i].onmouseover = function(){ // 排他思想 for(var j=0; j<olLiArr.length; j++){ olLiArr[j].className = ""; } this.className = "current" // 鼠標(biāo)放到小方塊上時(shí),索引值和key以及square同步 // key = this.index; // square = this.index; key = square = this.index; // 移動(dòng)盒子 animate(ul, -this.index*imgWidth); } } // 5. 添加定時(shí)器 var timer = setInterval(autoPlay, 1000); // 固定向右切換圖片 // 兩個(gè)定時(shí)器(一個(gè)記錄圖片,一個(gè)記錄子菜單欄) var key = 0; var square = 0; function autoPlay(){ // 通過key的自增來模擬圖片的索引值,然后移動(dòng)ul key++; if(key > olLiArr.length){ // 圖片已經(jīng)滑到最后一張,接下來應(yīng)該跳轉(zhuǎn)到第一張,然后滑動(dòng)到第二張 ul.style.left = 0; key = 1; } animate(ul, -key*imgWidth); // 通過控制square的自增來模擬小方塊的索引值,然后點(diǎn)亮盒子 // 排他思想做小方塊 square++; if(square > olLiArr.length-1){ // 索引值不能大于5,如果大于5則立即變?yōu)?; square = 0; } for(var i=0; i<olLiArr.length; i++){ olLiArr[i].className = ""; } olLiArr[square].className = "current"; } // 鼠標(biāo)放上去清除定時(shí)器,移開啟動(dòng)定時(shí)器 all.onmouseover = function(){ div.style.display = "block"; clearInterval(timer); } all.onmouseout = function(){ div.style.display = "none"; timer = setInterval(autoPlay,1000); } // 6. 左右切換圖片(鼠標(biāo)放上去顯示,移開隱藏) spanArr[0].onclick = function(){ // 通過控制key的自增來模擬圖片的索引值,然后移動(dòng)ul key--; if(key<0){ // 先移到最后一張,然后key的值取前一張的索引值,然后向前移動(dòng) ul.style.left = -imgWidth*(olLiArr.length) + "px"; key = olLiArr.length-1; } animate(ul, -key*imgWidth); // 通過控制square的自增來模擬小方塊的索引值,然后點(diǎn)亮小方塊 square--; if(square<0){ // 索引值不能大于等于5,如果為5,立即變?yōu)? square = olLiArr.length-1; } for(var i=0; i<olLiArr.length; i++){ olLiArr[i].className = ""; } olLiArr[square].className = "current"; } spanArr[1].onclick = function(){ // 右側(cè)的和定時(shí)器一模一樣 autoPlay(); } // 動(dòng)畫封裝 var absSpeed = 10; //設(shè)定步長 function animate(ele, target){ clearInterval(ele.timer); var speed = target > ele.offsetLeft ? absSpeed : -absSpeed; ele.timer = setInterval(function(){ var val = target - ele.offsetLeft; ele.style.left = ele.offsetLeft + speed + "px"; if(Math.abs(val) < Math.abs(speed)){ ele.style.left = target + "px"; clearInterval(ele.timer); } }, 10) } </script> </body> </html>
看完了這篇文章,相信你對“如何使用JavaScript實(shí)現(xiàn)帶有子菜單和控件的slider輪播圖效果”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。