成品效果如下圖所示：

因為博客園限制圖片上傳大小被我刪了一些幀數，所以圖片看起來會有一點卡，現實運行是不會的

?

搭建HTML和CSS結構

HTML代碼如下：

1 <div class="wrapper"> 2 <ul class="sliderPage"> 3 <li> 4 <img src="images/1.jpg"> 5 </li> 6 <li> 7 <img src="images/2.jpg"> 8 </li> 9 <li> 10 <img src="images/3.jpg"> 11 </li> 12 <li> 13 <img src="images/1.jpg"> 14 </li> 15 </ul> 16 <div class="btn leftBtn">&lt;</div> 17 <div class="btn rightBtn">&gt;</div> 18 <div class="sliderIndex"> 19 <span class="active"></span> 20 <span></span> 21 <span></span> 22 </div> 23 </div>

CSS代碼如下：

1 * { 2 padding: 0px; 3 margin: 0px; 4 list-style: none; 5 } 6 7 .wrapper { 8 margin: 50px auto 0px; 9 width: 480px; 10 height: 640px; 11 overflow: hidden; 12 position: relative; 13 } 14 15 .wrapper .sliderPage { 16 height: 640px; 17 width: 2400px; 18 position: absolute; 19 left: 0px; 20 top: 0px; 21 } 22 23 .wrapper .sliderPage li { 24 width: 480px; 25 height: 640px; 26 float: left; 27 } 28 29 .wrapper .sliderPage li img { 30 width: 100%; 31 height: 100%; 32 } 33 34 .wrapper .btn { 35 position: absolute; 36 top: 50%; 37 margin-top: -20px; 38 width: 40px; 39 height: 40px; 40 color: #fff; 41 background-color: #000; 42 text-align: center; 43 line-height: 40px; 44 opacity: 0.3; 45 cursor: pointer; 46 } 47 48 .wrapper:hover .btn { 49 opacity: 0.7; 50 } 51 52 .wrapper .leftBtn { 53 left: 15px; 54 } 55 56 .wrapper .rightBtn { 57 right: 15px; 58 } 59 60 .wrapper .sliderIndex { 61 position: absolute; 62 width: 100%; 63 bottom: 15px; 64 text-align: center; 65 } 66 67 .wrapper .sliderIndex span { 68 display: inline-block; 69 width: 8px; 70 height: 8px; 71 background-color: #ccc; 72 border-radius: 50%; 73 margin-right: 10px; 74 cursor: pointer; 75 } 76 77 .wrapper .sliderIndex .active { 78 background-color: #f40; 79 }

?

搭建好后的效果如下：

?傳入（調用寫好的運動函數）

?

1 //獲取樣式 2 function getStyle(dom, attr) { 3 if (window.getComputedStyle) { 4 return window.getComputedStyle(dom, null)[attr]; 5 } else { 6 return dom.currentStyle[attr]; 7 } 8 } 9 10 //運動函數 11 function startMove(dom, attr, func) { 12 clearInterval(dom.timer); 13 var iSpeed = null, //速度 14 iCur = null; //當前值 15 dom.timer = setInterval(function () { 16 for (var i in attr) { 17 if (i == 'opacity') { //判斷是否為 透明 屬性，是的話，特殊處理； 18 iCur = parseFloat(getStyle(dom, i)) * 100; 19 } else { 20 iCur = parseInt(getStyle(dom, i)); 21 } 22 iSpeed = (attr[i] - iCur) / 7; 23 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); 24 25 if (i == 'opacity') { 26 dom.style.opacity = (iCur + iSpeed) / 100; 27 } else { 28 dom.style[i] = iCur + iSpeed + 'px'; 29 } 30 if (iCur == attr[i]) { 31 clearInterval(dom.timer); 32 func(); 33 } 34 } 35 }, 30) 36 }

?

?

?

?

?

開始寫輪播圖代碼 　　 1 var timer = null; 2 var sliderPage = document.getElementsByClassName('sliderPage')[0]; 3 var moveWidth = sliderPage.children[0].offsetWidth; //sliderPage的子節點第n位的width等于movewidth 4 var num = sliderPage.children.length - 1; //li的長度減去1，相當于4-1=3；剛好到了第三張也就是最后一張 5 var leftBtn = document.getElementsByClassName('leftBtn')[0]; // 獲取左按鈕事件 6 var rightBtn = document.getElementsByClassName('rightBtn')[0]; //獲取右按鈕事件 7 var lock = true; //設置一個鎖使定時器不發生沖突，true的時候可以進入，false就把鎖鎖上； 8 //相當于一個廁所，很多人在排隊， 沒進入前等于true，第一個進去之后把鎖鎖上(也就是等于false)這樣別人就進不去， 9 //出來的時候把鎖打開(也就是等于true)方便下一個進入 10 11 var index = 0; //小圓點初始值等于0 12 var oSpanArray = document.getElementsByClassName('sliderIndex')[0].getElementsByTagName('span');//選出sliderIndex下面的所有span標簽 13 14 15 // 點擊向左 16 leftBtn.onclick = function () { 17 autoMove('right->left'); //當點擊leftBtn的時候傳入'right->left'這個實參 18 } 19 20 21 22 // 點擊向右 23 rightBtn.onclick = function () { 24 autoMove('left->right'); //當點擊rightBtn的時候傳入'left->right'這個實參 25 } 26 27 28 //點擊小圓點跳轉至相應的圖片和小圓點位置 29 for (var i = 0; i < oSpanArray.length; i++) { //先循環拿到3個span標簽，也就是每個小圓點的位置 30 (function (myIndex) { 31 oSpanArray[i].onclick = function () { //給每一個小圓點注冊一個點擊事件 32 lock = false; //點擊后關閉鎖，防止沒執行完再次運行點擊事件 33 clearInterval(timer); //清理定時器，防止沒執行完再次開啟定時器 34 index = myIndex; //myIndex和i形參實參相統一，myIndex付給index 35 startMove(sliderPage,{ left: - index * moveWidth }, //執行函數讓sliderPage(也就是ul)移動 36 37 function () { //再執行回調函數 38 lock = true; //執行完再次開啟鎖，方便下次開啟點擊事件 39 timer = setInterval(autoMove, 1500); //開啟定時器，讓圖片繼續運動 40 changeIndex(index); //執行小圓點函數，讓小圓點每次點擊同步 41 }) 42 } 43 })(i) 44 } 45 46 function autoMove(dierction) { // 函數形參傳入dierction 47 48 if (lock) { //lock = true時進入判斷 49 lock = false; //進來后等于false，判斷之后再次開啟鎖 50 clearInterval(timer); // 每次進入autoMove函數的時候立即關閉定時器，執行下面代碼之后再次開啟定時器。 51 // 相當于執行一次輪播一張圖片之后再次開啟一次定時器，再次輪播一張圖片，無限循環。 52 if (!dierction || dierction == 'left->right') { //不傳入參數時dierction等于undefined !undfined時等于true，進入if語句。 53 //點擊左右函數的時候傳入實參 54 index++; //小圓點位置每次加1 55 startMove(sliderPage,{ left: sliderPage.offsetLeft - moveWidth }, //執行函數startMove,sliderPage里面left當前值減去li的寬度，所以圖片移動 56 function () { //再執行回調函數 57 if (parseInt(getStyle(sliderPage, 'left')) == -num * moveWidth) { // 判斷當前left的值是否等于最后一個，也就是到了最后一張圖片 58 index = 0; // 當到了最后一張的時候，小圓點跳轉到第一張，小圓點下角標為0，也就是等于第一張圖片。 59 sliderPage.style.left = '0px'; // 如果等于到了最后一張圖片的話，就當前left值等于0。 === 回到第一張圖片 60 } 61 timer = setInterval(autoMove, 1500); // 每次執行結束之后再次開啟定時器 62 lock = true; //出去前等于true，方便下次進入，使定時器不會發生沖突同時運行多個定時器 63 changeIndex(index); //執行小圓點 64 }); 65 66 } else if (dierction == 'right->left') { //當點擊right按鈕后實參傳入'right->left',進入if語句執行以下代碼 67 if (sliderPage.offsetLeft == 0) { //如果開始執行的時候當前位置等于0 68 sliderPage.style.left = - num * moveWidth + 'px'; //那就把最后一張的位置付給他，讓他跳轉至最后一張 69 index = num; //如果剛開始的時候，當前位置等于0點擊向left那么跳轉到最后一張圖片的位置，所以直接index的下角標直接等于最后一張的位置 70 } 71 index--; //小圓點位置每次減1 72 startMove(sliderPage,{ left: sliderPage.offsetLeft + moveWidth }, 73 function () { 74 timer = setInterval(autoMove, 1500); //每次執行之后再次開啟定時器 75 lock = true; //出去前等于true，方便下次進入，使定時器不會發生沖突同時運行多個定時器 76 changeIndex(index); //執行小圓點 77 }) 78 } 79 } 80 } 81 function changeIndex(_index) { 82 for (var i = 0; i < oSpanArray.length; i++) { 83 oSpanArray[i].className = ''; //循環小圓點讓每個位置的classname等于空 84 } 85 oSpanArray[_index].className = 'active'; //因為原始值是0，所以第一個有classname樣式，每次index加數，下角標改變時classname也同步改變 86 } 87 timer = setInterval(autoMove, 1500); // 設置一個定時器，每1500毫秒運行一次autoMove函數

?

?

轉載于:https://www.cnblogs.com/yangpeixian/p/10771970.html

總結

以上是生活随笔為你收集整理的原生javascript之实战 轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。