圖片輪播的方法有很多種孽尽,這里我用一種簡單的方法外永。
功能
![ZQAD}XT%FT]U)K0NHOFF$_4.png](http://upload-images.jianshu.io/upload_images/3165609-7813a2ac129b9364.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 點(diǎn)擊左右箭頭能夠自由切換上一張圖片和下一張圖片
- 利用定時(shí)器和函數(shù)遞歸來實(shí)現(xiàn)圖片間歇切換和動(dòng)畫切換
- 聚焦原點(diǎn)跟隨圖片的切換和改變,點(diǎn)擊聚焦原點(diǎn)也可以切換圖片
(ps: 樣式代碼自己隨便寫即可)
<div id="outerWrapper">
<div class="img-wrapper" style="left:-600px">
<ul id="get-imgs">
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/1.jpg" alt=""></li>
</ul>
</div>
<i id="arrow-right"></i>
<i id="arrow-left"></i>
<div id="focus-circle">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
首先抢蚀,要有一個(gè)大概的思路就是
在最外層有一個(gè)父包含塊
outerWrapper
(長寬設(shè)為一張圖片的大信S纭),里面有一個(gè)圖片包含塊img-wrapper
(寬度為所有圖片的寬度和俘侠,高度和圖片一樣)。設(shè)置父包含塊
outerWrapper
的display:hidden
薇搁,圖片包含塊img-wrapper
中的img
設(shè)為浮動(dòng)的斋扰,這樣所有圖片在一行,并且每次只能看到一張圖片啃洋,其他都被隱藏了传货。(注意圖片中的第一張和最后一張,這樣做是為了無縫隙的從第一張切換到最后一張宏娄,從最后一張切換到第一張)问裕。設(shè)置父包含塊
outerWrapper
oposition:relative
,圖片包含塊img-wrapper``oposition:relative
,添加內(nèi)聯(lián)樣式<div class="img-wrapper" style="left:-600px">
.通過改變
img-wrapper
的left 值就可以實(shí)現(xiàn)圖片的切換。所有可以寫一個(gè)改變left值得函數(shù)绝编,給左右箭頭的點(diǎn)擊事件添加這個(gè)函數(shù)僻澎,也可以將聚焦原點(diǎn)
的點(diǎn)擊事件添加這個(gè)函數(shù),實(shí)現(xiàn)點(diǎn)擊聚焦原點(diǎn)改變圖片怎樣讓
聚焦原點(diǎn)
跟著圖片的切換而改變十饥?可以設(shè)一個(gè)變量activeSpan
變量窟勃,取得聚焦原點(diǎn)的數(shù)組,然后當(dāng)點(diǎn)擊左右箭頭的時(shí)候改變activeSpan
的值從而改變對(duì)應(yīng)的原點(diǎn)的樣式逗堵。
以下是代碼實(shí)現(xiàn)
先取得各變量的值
var outerWrapper = document.querySelector("#outerWrapper"),
//代表左箭頭
slideLeft = outerWrapper.querySelector('#arrow-left'),
//代表右箭頭
slideRight = outerWrapper.querySelector('#arrow-right'),
//圖片包含塊
imgWrapper = outerWrapper.querySelector('.img-wrapper'),
//圖片的數(shù)量
imgNumber = outerWrapper.querySelectorAll('#get-imgs img').length,
//包含聚焦原點(diǎn)的數(shù)組
spans = outerWrapper.querySelectorAll('#focus-circle span'),
//對(duì)應(yīng)聚焦原點(diǎn)的數(shù)組秉氧,對(duì)應(yīng)圖片的聚焦原點(diǎn)的下標(biāo)值,開始為第一張圖片蜒秤,所以為0
activeSpan = 0,
//判斷是否正在切換圖片汁咏,如果正在切換圖片點(diǎn)擊按鈕切換圖片無效
flag = true;
//間隙切換圖片的定時(shí)器
timer = null,
//每次切換圖片改變的偏移量,與一張圖片的寬度相同
offset = 600;
改變left值得函數(shù)
function changeLeft(offset){
//因?yàn)楹竺娑啻我玫絧arseInt(imgWrapper.style.left) + offset的值作媚,所以可以賦給一個(gè)變量攘滩,這樣更方便
//newLeft 代表圖片包含塊imgWrapper加上偏移量后的數(shù)值
//就表示你要將圖片移動(dòng)多少
var newLeft = parseInt(imgWrapper.style.left) + offset,
//切換到另一張圖片經(jīng)過幾次間隔
interval = 5;
if(Math.abs(offset)>600*2){
interval = 2;
}
//每次間隔移動(dòng)多大的距離,相當(dāng)于從一張圖片移動(dòng)到另一張的速度
var speed = offset/interval,
//遞歸調(diào)用的時(shí)間
time = 100,
flag = false;
//一個(gè)自執(zhí)行的函數(shù)纸泡,目的就是每次移動(dòng)一部分的距離漂问,直到移到自己想到的地方
(function(){
if((offset<0&&parseInt(imgWrapper.style.left)>newLeft)||(offset>0&&parseInt(imgWrapper.style.left)<newLeft)){
imgWrapper.style.left = parseInt(imgWrapper.style.left)+speed+'px';
setTimeout(arguments.callee,time);
}else{
flag = true;
imgWrapper.style.left = newLeft + 'px';
//如果移到最后一張圖片,下次切換就變到第一張,從第一張到最后一張也一樣
if(newLeft === -(imgNumber-1)*Math.abs(offset)){
imgWrapper.style.left = -Math.abs(offset) + 'px';
}else if(newLeft === 0){
imgWrapper.style.left = -(imgNumber-2)*Math.abs(offset) + 'px';
}
}
})();
}
改變聚焦原點(diǎn)的函數(shù)
function changeFocus(index){
if(index === spans.length){
index = 0;
}else if(index === -1){
index = (spans.length-1);
}
activeSpan = index;
outerWrapper.querySelector('#focus-circle span.active').classList.remove('active');
spans[index].classList.add('active');
}
左右箭頭點(diǎn)擊的函數(shù)
slideLeft.onclick = ()=>{
if(flag){
activeSpan--;
changeLeft(offset);
changeFocus(activeSpan);
}
};
slideRight.onclick = ()=>{
if(flag){
activeSpan++;
changeLeft(-offset);
changeFocus(activeSpan);
}
};
點(diǎn)擊聚焦原點(diǎn)的函數(shù)
for(var i=0,len=spans.length;i<len;i++){
spans[i].index = i;
spans[i].onclick = function(){
if(this.index !== activeSpan){
changeLeft((activeSpan-this.index)*600);
activeSpan = this.index;
changeFocus(activeSpan);
}
}
}
//設(shè)置定時(shí)器蚤假,實(shí)現(xiàn)每 2 秒自動(dòng)切換一次圖片
timer = setInterval(slideLeft.onclick,2000);
//當(dāng)鼠標(biāo)移動(dòng)到圖片上時(shí)栏饮,清除定時(shí)器,鼠標(biāo)從圖片上移開時(shí)重新設(shè)置定時(shí)器
outerWrapper.onmouseenter=()=>clearInterval(timer);
outerWrapper.onmouseleave=()=>timer=setInterval(slideLeft.onclick,2000);
如果想要源代碼可以點(diǎn)擊這里
里面有兩個(gè)demo磷仰,index直接用的js函數(shù)袍嬉,index_js是封裝了在一個(gè)構(gòu)造函數(shù),每次調(diào)用可以直接new 一個(gè)對(duì)象即可灶平。
后面可能還會(huì)有其他的圖片輪播方式伺通,盡請(qǐng)期待!