本篇博文實現的是一個原生js寫的輪播圖,含括了大部分輪播圖的功能,有的同窗問前端框架那麼多幹嗎要用原生寫,傷神費腦.javascript
我的感受程序世界裏的框架,是讓大牛更牛,小白也永遠只是小白.框架是死的,需求是不斷更新的,咱們只有知道了原理,才能不斷利用原理知足別人的需求,總會有那麼個時候框架知足不了的.因此,不要依賴框架,爲了避免讓本身一直作小白,最近一直在用原生js寫bootstrap的一些效果.(剛入坑不久,大佬輕噴)css
因爲輪播圖在網站中的應用比比皆是,在此分享和總結以前原生js實現的輪播圖.html
注:文中代碼只是片斷,具體可在CSDN下載或者去個人GitHub倉庫下載,記得給star哦,3q~前端
首先咱們須要瞭解輪播圖一些基本原理,和輪播圖的一些功能:java
輪播圖原理:
並排的一組照片,放在父盒子的框裏,父盒子overflow設置隱藏;git
- 輪播圖必須注意的一個問題:
第一張跳最後一張或者相反的時候,怎麼解決中間的空窗期(不處理會很難看)?github
輪播圖功能:
自輪播:用於展現,固定時間間隔自動跳下一張;bootstrap
兩翼輪播:用於用戶點擊兩側的箭頭,跳向先後一張;數組
點選:一般位於下方用於標識當前所在張,也有點擊跳向對應張的功能前端框架
無外乎,大多數輪播圖也就這些功能,先看一下效果圖:
接下來咱們就一一實現這些功能
1 ) HTML視圖:
注意container裏的img,須要在首尾各多加一張,爲了首位跳轉的時候沒有空窗:
原理:以末尾跳向第一張爲例,
當咱們在最後一張時候點擊下一張,視圖顯示最後一張的咱們額外加的一張,也就是第一張的替代,此時顯示的是第一張圖片,確實不是真正位置的第一張,同時,在跳向這假第一張的時候將開始位置重置.
你們能夠結合後面js代碼理解.
<div id="container"> <!-- 圖片 --> <div id="list" style="left: -800px;"> <img src="img/5.jpg" alt="1" /> <img src="img/1.jpg" alt="1" /> <img src="img/2.jpg" alt="2" /> <img src="img/3.jpg" alt="3" /> <img src="img/4.jpg" alt="4" /> <img src="img/5.jpg" alt="5" /> <img src="img/1.jpg" alt="5" /> </div> <div id="buttons"> <!-- 點選小圈圈 --> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <!-- 上一張下一張 --> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div>
2 ) CSS樣式:(片斷)
幫助你們理解下面樣式,在此概述一下:
- 點選圓圈,當前張所對應的圈高亮顯示;
- 兩翼,鼠標滑過才顯示,鼠標放上去高亮顯示;
- 層級問題:除了父級的展現框盒子,上面是圖片層,最上面是兩翼和點選圈.
#container { position: relative; width: 800px; height: 600px; border: 3px solid black; overflow: hidden; } #buttons{ position: absolute; left: 320px; bottom: 25px; width: 160px; height: 10px; z-index: 6; } #buttons span{ float: left; margin: 0 10px; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; cursor: pointer; } .arrow{ position: absolute; top: 260px; z-index: 2; width: 40px; height: 50px; font-size: 40px; font-weight: bold; line-height: 48px; text-align: center; color:#fff; background-color: rgb(0,0,0,0.3); cursor: pointer; } #container:hover .arrow { display: block; }
3 ) js代碼:
- 關於動畫,只有跳下一張上一張,無外乎就方向不同,咱們封裝到一個函數,方向傳參控制;
- 定時器的間隔控制函數,中止輪播函數;
- 小圓點的實現比較麻煩,咱們循環給每一個圓加事件,經過屬性標籤index獲取用戶點擊的標籤,用的是getAttribute();
- 還有具體地看代碼註釋吧,註釋的比較詳細.
function animate(offset) { //獲取的是style.left，是相對左邊獲取距離，因此第一張圖後style.left都爲負值， //且style.left獲取的是字符串，須要用parseInt()取整轉化爲數字。 var newLeft = parseInt(list.style.left) + offset; list.style.left = newLeft + 'px'; //無限滾動判斷 if (newLeft > -600) { list.style.left = -3000 + 'px'; } if (newLeft < -3000) { list.style.left = -600 + 'px'; } } function buttonsShow() { // //將以前的小圓點的樣式清除 for (var i = 0; i < buttons.length; i++) { if (buttons[i].className == "on") { buttons[i].className = ""; } } //數組從0開始，故index須要減1 buttons[index - 1].className = "on"; console.log(index-1); } for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = function () { /* 這裏得到鼠標移動到小圓點的位置，用this把index綁定到對象buttons[i]上，去谷歌this的用法 */ /* 因爲這裏的index是自定義屬性，須要用到getAttribute()這個DOM2級方法，去獲取自定義index的屬性*/ var clickIndex = parseInt(this.getAttribute('index'));//this指向當前點擊圈 var offset = 600 * (index - clickIndex); //這個index是當前圖片停留時的index index = clickIndex; //存放鼠標點擊後的位置，用於小圓點的正常顯示 animate(offset); buttonsShow(); } } container.onmouseover = stop; container.onmouseout = play; play(); //初始化