1. 程式人生 > >用jquery手寫當前放大效果輪播圖

用jquery手寫當前放大效果輪播圖

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);