原生JS實現(xiàn)的輪播圖功能詳解
本文實例講述了原生JS實現(xiàn)的輪播圖功能。分享給大家供大家參考，具體如下：
一、效果預覽：
由于只能上傳2M以下的圖片，這里只截取了自動切換的效果：
二、編寫語言
HTML、CSS、原生JS
三、編寫思路
（一）HTML部分
1、.slide意為滑槽，里面存放所有圖片；
2、.prev存放向左的箭頭，.next存放向右的箭頭；
3、pointer意為指示器，存放下方的五個切換按鈕，每個切換按鈕用span來表示；
4、.m-view，意為視窗，即每次看到圖片的窗口，它存放以上所有的部件；
（二）CSS部分
1、.m-view設為相對定位，他的后代元素可以以它作為絕對定位的參照；
2、.slide、.prev、.next、pointer全都用絕對定位放到合適位置；
3、.slide的所有圖片水平排列，且視窗.m-view的寬度設為只有一張圖片那么寬，這樣默認情況.slide還是會全部顯示；當給.m-view設置overflow:hidden后子元素超出它的部分就會隱藏，就實現(xiàn)了只顯示一張圖片的效果；
（三）JS部分
1、切換功能：
設置一個切換函數(shù)toggle實現(xiàn)左切或者右切一張圖，toggle有兩個子函數(shù)leftToggle和rightToggle分別實現(xiàn)向左、向右切換一張圖，將他們分別綁定到.prev和.next按鈕的clik事件；
2、切換功能的淡入動畫效果
只有1的話切換是立即產(chǎn)生的，沒有過渡效果；這里利用定時器和步長將切換功能細化到更小的滑動操作leftStep和rightStep，leftToggle和rightToggle通過多次調(diào)用滑動操作來實現(xiàn)一次切換，這樣就會產(chǎn)生動畫效果；
3、跳轉(zhuǎn)功能
對指示器的每個圓形按鈕綁定跳轉(zhuǎn)功能，跳轉(zhuǎn)實際上是將.slide進行移動；
4、自動播放
只需要設置定時器，每隔一定時間執(zhí)行切換即可；
四、我的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<style>
.m-view,.m-view .slide img{
position: relative;/*作為絕對定位的父元素*/
width: 800px;
height: 600px;
}
.m-view{
overflow: hidden;/*將超出該div的子元素隱藏*/
}
.m-view .slide{
position: absolute;
width: 8000px;
height: 600px;
}
.m-view .slide img{
margin-right: -5px;
}
.m-view .prev,.m-view .next{
position: absolute;
top: 40%;
font: 60px/60px Microsoft YaHei;
color: #00BFFF;
}
.m-view .prev{
left: 10px;
}
.m-view .next{
right: 10px;
}
.m-view .pointer{
position: absolute;
bottom: 40px;
left: 33%;
}
.m-view .pointer span{
display: inline-block;/*水平排列*/
width: 40px;
height: 40px;
border-radius: 20px;
margin-right: 10px;
background-color: #00FF00;
}
.m-view .pointer .on{/*點亮當前圖片對應的圓圈*/
background-color: #1E90FF;
}
</style>
</head>
<body>
<div class="m-view">
<div class="slide" style="left: -800px">
<img src="../lunbo/5.jpg" alt="4">
<img src="../lunbo/1.jpg" alt="0">
<img src="../lunbo/2.jpg" alt="1">
<img src="../lunbo/3.jpg" alt="2">
<img src="../lunbo/4.jpg" alt="3">
<img src="../lunbo/5.jpg" alt="4">
<img src="../lunbo/1.jpg" alt="0">
</div>
<div class="prev"><</div>
<div class="next">></div>
<div class="pointer">
<span class="button on" index="0"></span>
<span class="button" index="1"></span>
<span class="button" index="2"></span>
<span class="button" index="3"></span>
<span class="button" index="4"></span>
</div>
</div>
<script type="text/javascript">
var view=document.getElementsByClassName('m-view')[0];
var slide=document.getElementsByClassName('slide')[0];
var prev=document.getElementsByClassName('prev')[0];
var next=document.getElementsByClassName('next')[0];
var button=document.getElementsByClassName('button');
var curIndex=0;//當前圖片的索引位置
var toggled=true;//是否正在切換，true表明切換已完成，此時才能切換
/* Toggle函數(shù)實現(xiàn)切換一張圖片的功能 */
function Toggle () {
var TIMER=50;//滑動一次所用的時間，它是setInterval的第二個參數(shù)
var time=800;//每切換一張圖片總共用的時長
var times=time/TIMER;//每切換一張圖片需滑動的次數(shù)
var stepLenth=800/times;//每次滑動的步長
var leftToggle=function () {
var t1=times;
function leftStep(){
slide.style.left=parseInt(slide.style.left)+stepLenth+"px";
t1--;
if (!t1) {
clearInterval(interval);
curIndex--;
if (curIndex<0) {
slide.style.left=parseInt(slide.style.left)-4000+"px";
curIndex=4;
};
toggled=true;
};
};
if (toggled==true) {
toggled=false;
button[curIndex].className="button";
if (curIndex!=0) {
button[curIndex-1].className="button on";
}else{
button[curIndex+4].className="button on";
}
var interval=setInterval(leftStep,TIMER);
};
};
var rightToggle=function () {
var t2=times;
function leftStep(){
slide.style.left=parseInt(slide.style.left)-stepLenth+"px";
t2--;
if (!t2) {
clearInterval(interval);
curIndex++;
if (curIndex>4) {
slide.style.left=parseInt(slide.style.left)+4000+"px";
curIndex=0;
};
toggled=true;
};
};
if (toggled==true) {
toggled=false;
button[curIndex].className="button";
if (curIndex!=4) {
button[curIndex+1].className="button on";
}else{
button[curIndex-4].className="button on";
};
var interval=setInterval(leftStep,TIMER);
};
}
this.leftToggle=leftToggle;//輸出對外的接口
this.rightToggle=rightToggle;
};
var toggle=new Toggle();
prev.onclick=function () {
toggle.leftToggle();
};
next.onclick=function () {
toggle.rightToggle();
};
/* 點擊圓圈跳轉(zhuǎn)功能 */
for (var i = 0; i < button.length; i++) {
button[i].onclick=function () {
var newIndex=parseInt(this.getAttribute("index"));
if (newIndex!=curIndex) {
var distance=-800*(newIndex-curIndex);
slide.style.left=parseInt(slide.style.left)+distance+"px";
button[curIndex].className="button";
button[newIndex].className="button on";
curIndex=newIndex;
};
};
}
/* 自動播放功能，鼠標移上去停止播放，移開再次播放 */
var intervalo=setInterval(toggle.rightToggle,3000);
view.onmouseover=function () {
clearInterval(intervalo);
}
view.onmouseout=function () {
intervalo=setInterval(toggle.rightToggle,3000);
}
</script>
</body>
</html>
五、一些總結(jié)
1、本次采用了面向?qū)ο蠛头庋b的思路，這是因為個人體會到確實面向?qū)ο蟮脑O計能使代碼編寫思路更加清晰，還能夠免去很多冗余重復的代碼，也嘗試過其他書寫思路，但都會使代碼變得不太直觀；要注意的一點就是封裝后要向外提供接口，且如果是封裝在一個函數(shù)中，需要實例化一個對象才能調(diào)用；
2、在.slide中設置了一個內(nèi)聯(lián)樣式，這是因為在后面要獲取并改變它的left屬性，如果不采用內(nèi)聯(lián)樣式的方法，將無法設置；因為初始時.style.left只能獲取內(nèi)聯(lián)樣式，即使采用內(nèi)部樣式和外部樣式也會使得獲取的值為undefined。當然，肯定也可以采用其他方法，但是似乎其他方案都更為復雜一些，沒找到更簡便的方法。
3、在前后各多放置一張圖片的作用：
比如，當前是圖片1，現(xiàn)在向左切換，可以和其他位置一樣先執(zhí)行統(tǒng)一的左移操作，這時視窗顯示額外放置的圖片5，再將.slide整體左移使真正的圖片5顯示在視窗中，這樣是先出現(xiàn)了動畫效果再“暗中移動”了.slide，就好像沒移動一樣，真正做到了無縫切換，邏輯也很簡單；如果不放置額外的圖片，就需要先將視窗左移，使圖片5顯示在視窗中，這樣動畫效果難以設置。
4、在獲取每個span在它父元素的索引位置時，采用了getAttribute獲取自定義的index屬性的方法，其他方法肯定也有不少，但是肯定不能在循環(huán)中把i的值直接當成span的索引位置。
5、在跳轉(zhuǎn)功能中，如果要跳轉(zhuǎn)的正是當前的頁面，應該什么也不做，這樣可以優(yōu)化性能 。
6、在點擊左右箭頭切換時，先判斷上一次動畫是否完成，沒完成就不切換，這樣可以優(yōu)化性能，否則連續(xù)點擊可能導致卡頓、切換效果不佳。
7、代碼似乎還有可以優(yōu)化的地方；
8、這個只是制作了一個輪播圖，接下來考慮做一個輪播組件，似乎難度要大些，還有3D的輪播效果也想要嘗試下了。
PS：感興趣的朋友還可以將上述代碼中的圖片替換成網(wǎng)絡圖片，再使用如下在線工具在線測試運行效果：
HTML/CSS/JavaScript代碼運行工具
http://tools.jb51.net/code/HtmlJsRun
在線HTML/CSS/JavaScript前端代碼調(diào)試運行工具
http://tools.jb51.net/code/WebCodeRun
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
- JS使用tween.js動畫庫實現(xiàn)輪播圖并且有切換功能
- js原生實現(xiàn)移動端手指滑動輪播圖效果的示例
- JavaScript實現(xiàn)帶有子菜單和控件的slider輪播圖效果
- 無限循環(huán)輪播圖之運動框架(原生JS實現(xiàn))
- 使用html+js+css 實現(xiàn)頁面輪播圖效果(實例講解)
- 利用純js + transition動畫實現(xiàn)移動端web輪播圖詳解
- JS輪播圖實現(xiàn)簡單代碼
- js實現(xiàn)移動端輪播圖效果
- 原生js實現(xiàn)輪播圖的示例代碼
- js實現(xiàn)支持手機滑動切換的輪播圖片效果實例
- 原生JS實現(xiàn)的簡單輪播圖功能【適合新手】
相關(guān)文章
這篇文章主要為大家詳細介紹了js仿微信公眾平臺打標簽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
javascript模擬php函數(shù)in_array
就是判斷一個元素是否存在于數(shù)組中的函數(shù)，既然js里string都有indexOf函數(shù)，為什么不在Array對象里設置一個這樣的函數(shù)呢，其實就用indexOf這個思想挺好的，不知道制定JS標準的人是基于什么考慮，把這樣一個如此常用的功能沒考慮在內(nèi)的。2015-04-04
electron多標簽頁模式更像客戶端的實現(xiàn)示例
本文主要介紹了electron多標簽頁模式更像客戶端,通過創(chuàng)建和管理多個網(wǎng)頁視圖或使用現(xiàn)成組件來實現(xiàn)類似Web瀏覽器的標簽頁功能,具有一定的參考價值,感興趣的可以了解一下2024-11-11
使用鼠標事件經(jīng)常碰到這樣的需求，比如獲取鼠標相對于事件源的位置，鼠標相對于事件源對象父元素的位置2011-09-09
這篇文章主要為大家詳細介紹了JS實現(xiàn)隨機生成驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
jQuery 使用 $ 符號作為 jQuery 的簡介方式。某些其他 JavaScript 庫中的函數(shù)（比如 Prototype）同樣使用 $ 符號。2011-04-04
Javascript DOM事件操作小結(jié)(監(jiān)聽鼠標點擊、釋放，懸停、離開等)
這篇文章主要介紹了Javascript DOM事件操作,結(jié)合實例形式總結(jié)分析了javascript監(jiān)聽鼠標點擊、釋放，懸停、離開等操作技巧,需要的朋友可以參考下2017-01-01
(function(){})()的用法與優(yōu)點...2007-03-03
用javascript實現(xiàn)畫板的代碼...2007-09-09
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)文字從右向左無限滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12