用jquery手寫當前放大效果輪播圖
阿新 • • 發佈:2018-12-18
var $a=$(".buttons a");
var $s=$(".buttons span");
var cArr=["p7","p6","p5","p4","p3","p2","p1"];
var index=0;
$(".next").click(
function(){
nextimg();
}
);
$(".prev").click(
function(){
previmg();
}
);
//上一張
function previmg(){
cArr.unshift(cArr[6]);
cArr.pop();
//i是元素的索引,從0開始
//e為當前處理的元素
//each迴圈,當前處理的元素移除所有的class,然後新增陣列索引i的class
$("li").each(function(i,e){
$(e).removeClass().addClass(cArr[i]);
});
index--;
if (index<0) {
index=6;
}
show();
}
//下一張
function nextimg(){
cArr.push(cArr[0]);
cArr.shift();
$("li").each(function (i,e){
$(e).removeClass().addClass(cArr[i]);
console.log(cArr[i]);
});
index++;
if (index>6) {
index=0;
}
show();
}
//通過底下按鈕點選切換
$a.each(function(){
$(this).click(function(){
var myindex=$(this).index();
var b=myindex-index;
if (b==0){
return;
}
else if(b>0) {
/*
* splice(0,b)的意思是從索引0開始,取出數量為b的陣列
* 因為每次點選之後陣列都被改變了,所以當前顯示的這個照片的索引才是0
* 所以取出從索引0到b的陣列,就是從原本的這個照片到需要點選的照片的陣列
* 這時候原本的陣列也將這部分陣列進行移除了
* 再把移除的陣列新增的原本的陣列的後面
*/
var newarr=cArr.splice(0,b);
cArr=$.merge(cArr,newarr);
$("li").each(function(i,e){
$(e).removeClass().addClass(cArr[i]);
})
index=myindex;
show();
}
else if(b<0){
/*
* 因為b<0,所以取陣列的時候是倒序來取的,也就是說我們可以先把陣列的順序顛倒一下
* 而b現在是負值,所以取出索引0到-b即為需要取出的陣列
* 也就是從原本的照片到需要點選的照片的陣列
* 然後將原本的陣列跟取出的陣列進行拼接
* 再次倒序,使原本的倒序變為正序
*/
cArr.reverse();
var oldarr=cArr.splice(0,-b)
cArr=$.merge(cArr,oldarr);
cArr.reverse();
$("li").each(function(i,e){
$(e).removeClass().addClass(cArr[i]);
})
index=myindex;
show();
}
})
})
//改變底下按鈕的背景色
function show(){
$($s).eq(index).addClass("blue").parent().siblings().children().removeClass("blue");
}
//點選class為p2的元素觸發上一張照片的函式
$(document).on("click",".p2",function(){
previmg();
return false;//返回一個false值,讓a標籤不跳轉
});
//點選class為p4的元素觸發下一張照片的函式
$(document).on("click",".p4",function(){
nextimg();
return false;
});
//滑鼠移入box時清除定時器
$(".box").mouseover(function(){
clearInterval(timer);
})
//滑鼠移出box時開始定時器
$(".box").mouseleave(function(){
timer=setInterval(nextimg,4000);
})
//進入頁面自動開始定時器
timer=setInterval(nextimg,4000);