js實現輪播圖效果 純js實現圖片自動切換
阿新 • • 發佈:2020-08-10
本文例項為大家分享了純js實現圖片自動切換的具體程式碼,供大家參考,具體內容如下
1.滑鼠經過的時候左右兩個小按鈕會自動彈出,自動播放停止,點選左右小按鈕可以切換圖片;
2. 滑鼠離開,恢復自動播放;
3. 點選下方中間幾個小圓圈,也會自動切換圖片;
原始碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } /* 輪播圖盒子樣式 */ .lunbotu { position: relative; width: 520px; height: 280px; margin: 50px auto; background-color: blue; overflow: hidden; } /* 左右按鈕樣式 */ .left,.right { display: none; position: absolute; top: 50%; margin-top: -15px; width: 30px; height: 30px; background-color: cornsilk; border-radius: 15px; text-align: center; line-height: 30px; cursor: pointer; z-index: 1; } .left { left: 0; } .right { right: 0; } li { list-style: none; } /* 設定圖片的ul的樣式 */ .firstul { position: absolute; top: 0; left: 0; width: 500%; } .firstul li { float: left; /* display: none; */ } /* 設定小圓圈的樣式 */ ol { /* width: 90px; */ padding: 0 5px 0 5px; position: absolute; bottom: 10px; left: 50%; margin-left: -45px; background-color: darkgrey; text-align: center; border-radius: 9px; } ol li { display: inline-block; width: 15px; height: 15px; border-radius: 50%; margin-right: 5px; background-color: white; cursor: pointer; } .current { background-color: red; } </style> <script src="animation.js"></script> </head> <body> <!-- 圖片大小全部是520*280 --> <div class="lunbotu"> <!-- 左右按鈕 --> <div class="left">></div> <div class="right"><</div> <!-- 圖片部分 --> <ul class="firstul"> <li><a href=""><img src=" images/1.jpg" alt="js實現輪播圖效果 純js實現圖片自動切換"> </a></li> <li><a href=""><img src=" images/2.jpg" alt="js實現輪播圖效果 純js實現圖片自動切換"> </a></li> <li><a href=""><img src=" images/3.gif" alt="js實現輪播圖效果 純js實現圖片自動切換"> </a></li> <li><a href=""><img src=" images/4.webp" alt="js實現輪播圖效果 純js實現圖片自動切換"> </a></li> </ul> <!-- 小圓圈 --> <ol class="firstol"></ol> </div> <!-- JS部分 --> <script> // 1.獲取事件源 var lunbotu = document.querySelector('.lunbotu'); var leftBox = document.querySelector('.left'); var rightBox = document.querySelector('.right'); var ul = lunbotu.querySelector('ul'); var ol = lunbotu.querySelector('ol'); var right = document.querySelector('.right'); var left = document.querySelector('.left'); var lunbotuWidth = lunbotu.offsetWidth; // console.log(ul) // console.log(ol) // 第一步: // 滑鼠經過輪播圖的時候,左右小按鈕彈出 lunbotu.addEventListener('mouseenter',function () { leftBox.style.display = 'block'; rightBox.style.display = 'block'; // 滑鼠經過輪播圖的時候,停止定時器 clearInterval(timer); }) // 滑鼠離開輪播圖的時候,左右小按鈕隱藏 lunbotu.addEventListener('mouseleave',function () { leftBox.style.display = 'none'; rightBox.style.display = 'none'; timer = setInterval(function () { right.click(); },2000) }) // 第二步: // 1.動態生成小圓圈 // 2.小圓圈的個數要跟圖片一樣 // 3.先得到ul裡面圖片的張數(圖片放入li裡面,所以就是li的個數) // 4.利用迴圈動態生成小圓圈(這個小圓圈要放入ol裡面) // 5.建立節點createElement('li')] // 6.插入節點ol.appendChild(li) // 7.第一個小圓圈需要新增current類 for (var i = 0; i < ul.children.length; i++) { // 建立一個li var li = document.createElement('li') // 記錄當前小圓圈的索引號 通過自定義屬性來做 li.setAttribute('index',i); // 把li新增到ol ol.appendChild(li); } // 排他思想:讓小Li變白色 for (var i = 0; i < ol.children.length; i++) { ol.children[i].addEventListener('click',function () { for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } this.className = 'current'; // 點選小圓圈的時候切換到對應的圖片 // 得到索引號 index var index = this.getAttribute('index'); // 解決小bug num = index; num_ol = index; // console.log(lunbotuWidth); // console.log(index) animation(ul,- index * lunbotuWidth) }) } // 給第一個li變顏色 ol.children[0].className = 'current'; // 克隆第一個li var first = ul.children[0].cloneNode(true); ul.appendChild(first); // 第三步: // 點選右邊按鈕事件 var num = 0; // 點選右側按鈕的時候小圓圈跟著滾動 var num_ol = 0; // 節流閥,防止點選過快,最後才加這句優化 var flag = true; // 右側按鈕: right.addEventListener('click',function () { if (flag) { flag = false; // 關閉節流閥 if (num == ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animation(ul,-num * lunbotuWidth,function () { flag = true; }); num_ol++; if (num_ol == ol.children.length) { num_ol = 0 } for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } ol.children[num_ol].className = 'current'; } }); // 左側按鈕: left.addEventListener('click',function () { if (flag) { flag = false; if (num == 0) { ul.style.left = -(ul.children.length - 1) * lunbotuWidth + 'px'; num = ul.children.length - 1; } num--; animation(ul,function () { flag = true; }); num_ol--; // num_ol=0的時候需要,點選左側按鈕,需要轉跳到ol.children.length-1的位置 if (num_ol < 0) { num_ol = ol.children.length - 1 } for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } ol.children[num_ol].className = 'current'; } }); // 自動播放圖片 var timer = setInterval(function () { right.click(); },2000) </script> </body> </html>
5.Js檔案的程式碼
// 封裝了一個動畫js檔案 function animation(obj,target,fn1){ // console.log(fn1); // fn是一個回撥函式,在定時器結束的時候新增 // 每次開定時器之前先清除掉定時器 clearInterval( obj.timer); obj.timer = setInterval(function(){ // 步長計算公式 越來越小 // 步長取整 var step = (target - obj.offsetLeft) /10; step = step > 0 ? Math.ceil(step) :Math.floor(step); if(obj.offsetLeft == target){ clearInterval( obj.timer); // 如果fn1存在,呼叫fn if(fn1){ fn1(); } }else{ // 每50毫秒就將新的值給obj.left obj.style.left = obj.offsetLeft +step +'px'; } },30) }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。