點擊左邊PRe按鈕，顯示前面三個圖片，點擊右邊的next按鈕，顯示后面的一組（三個）圖片。初始化只顯示next按鈕，到最后一組只顯示pre按鈕，中間過程兩按鈕都顯示。
效果圖是最終效果有做響應式，但這不是重點，不做介紹。
<div class="activity" id="activity-slide"> <a href="javascr class="pg_left ps_pre"></a> <a href="Javascript:void(0)" class="pg_right ps_next" ></a> <ul class="clearfix"> <li><a href="javascript:;"><img src="images/activity01-1410.jpg"></a></li> <li><a href="javascript:;"><img src="images/activity02-1410.jpg"></a></li> <li><a href="javascript:;"><img src="images/activity03-1410.jpg"></a></li> <li><a href="javascript:;"><img src="images/activity03-1410.jpg"></a></li> <li><a href="javascript:;"><img src="images/activity02-1410.jpg"></a></li> </ul></div>
#activity-slide是整個幻燈的入口，后面會將其作為參數來調用幻燈功能。
兩個按鈕ps_pre和ps_next將添加click事件響應點擊切換功能。
因為左右切換都是三個為一組的切換，如果li總個數不是3的倍數時，需要增加li節點填滿。
//需要追加的li節點個數var addli = 0;//一組切換3個livar num=3;var lisize = a.find("ul li").size();//獲取li個數//判斷需要添加的li節點數量var reminder=lisize%num;if(lisize%num!=0){addli = num-reminder;}else{addli = 0;}addlist();
上面是判斷得到需要追加的個數lisize，然后調用addlist追加。
addlist如下，從ul的第一個li開始復制，需要幾個就復制出幾個節點追加。節點追加完畢后重新計算ul的寬度。
function addlist(){ for(i=0;i<addli;i++){ var html = a.find("ul li").eq(i).html(); a.find("ul").append("<li>"+html+"</li>"); } a.find("ul").CSS({"width":(w_li+margin_li*2)*(lisize+addli)}); }
現在準備工作已經完成了。接下來就是給按鈕添加響應事件。在幻燈切換時涉及到左右按鈕的顯示和隱藏，所以先說這個按鈕顯示功能，將此分裝成一個函數btnshow。
/*** 參數說明： now:當前是第幾組，默認是0 c:總共有幾組 d:初始化時li的個數 e:每組顯示li個數 ***/ function btnshow(now,c,d,e){ if(d<=e){//如果初始化時li的個數小于一組要顯示的數，則不顯示pre和next按鈕 a.find(".ps_next").hide(); a.find(".ps_pre").hide(); }else if(now==0){//初始化now=0，顯示第一組，只顯示next a.find(".ps_next").show(); a.find(".ps_pre").hide(); }else if(now==c-1){//顯示到最后一組，只顯示pre a.find(".ps_next").hide(); a.find(".ps_pre").show(); }else{//顯示中間組，pre和next都需要顯示 a.find(".ps_next").show(); a.find(".ps_pre").show(); } }
接下來幻燈切換。這里a是傳入的參數，也就是 #activity-slide。給它下面的所以的pre和next添加響應。
向前一組，組數now減一，now是幾，就讓ul的margin-left為負幾倍的組寬（即3倍的（li寬度+margin寬度）），然后顯示對于按鈕即可。
向后滑動一組li同理。
function photoscroll(){ a.find(".ps_pre").on("click",function(){//console.log(num); now--; if(now >= 0){ a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)}); btnshow(now,parseInt((lisize+addli)/num),lisize,num); } }); a.find(".ps_next").on("click",function(){//console.log(num); now++; if(now < (lisize+addli)/num){ a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)}); btnshow(now,parseInt((lisize+addli)/num),lisize,num); } }); btnshow(now,parseInt((lisize+addli)/num),lisize,num); }
可能是jquery寫的原因，加了瀏覽器縮放尺寸響應后點擊切換按鈕響應有延時。
完整代碼
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/style.css"><script>window.onresize=function(){ var winWidth = document.body.clientWidth; if(winWidth <=1180){ body.className="grid-960"; }else if (winWidth<= 1410){ body.className="grid-1180"; }else if (winWidth>1410){ body.className="grid-1410"; }else { alert("do not know!"); }}</script></head><body id="body" class=""><script>//初始化狀態顯示樣式判斷,放在body后面var winWidth = document.body.clientWidth;if (winWidth <=1180){ body.className="grid-960"; }else if (winWidth<= 1410){ body.className="grid-1180"; }else if (winWidth>1410){ body.className="grid-1410"; }else { alert("do not know!");}</script><div class="wapper"> <div class="section"> <h2 class="title">熱門活動</h2> <div class="activity" class="movie" id="activity-slide"> <a href="javascript:void(0)" class="pg_left ps_pre"></a> <a href="javascript:void(0)" class="pg_right ps_next" ></a> <ul class="clearfix"> <li><a href="javascript:;"><img src="images/activity01-1410.jpg"></a></li> <li><a href="javascript:;"><img src="images/activity02-1410.jpg"></a></li> <li><a href="javascript:;"><img src="images/activity03-1410.jpg"></a></li> <li><a href="javascript:;"><img src="images/activity03-1410.jpg"></a></li> <li><a href="javascript:;"><img src="images/activity02-1410.jpg"></a></li> </ul> </div> </div></div></body></html><script src="http://code.jquery.com/jquery-latest.js"></script><script>//首頁圖片滾動切換(function($){ $.photolist=function(a){ var w_li = a.find("li").width(); var h_li = a.find("li").height(); var margin_li=parseInt(a.find("li").css("marginLeft")); var now = 0; var num = 0; var addli = 0; var lisize = a.find("ul li").size(); var htmlall = a.find("ul").html(); //判斷每次滾動數量 /* var w_body = $("body").width(); if(w_body <=1170){ var num = 3; }else if(w_body<= 1380){ var num = 4; }else if(w_body>1380){ var num = 5; } */ var num=3; //判斷需要添加的li節點數量 var reminder=lisize%num; if(lisize%num!=0){addli = num-reminder;} else{addli = 0;} addlist(); //點擊滾動事件 photoscroll(); $(window).resize(function(){ //location.reload(); now = 0; addli = 0; a.find("ul").html(htmlall);//html內容還原初始值 a.find(".ps_next").show();//按鈕樣式初始化 a.find(".ps_pre").hide(); //判斷每次滾動數量 /* var w_body = $("body").width(); if(w_body <=1170){ var num = 3; }else if(w_body<= 1380){ var num = 4; }else if(w_body>1380){ var num = 5; } */ var num=3; //判斷需要添加的li節點數量 var reminder=lisize%num; if(lisize%num!=0){addli = num-reminder;} else{addli = 0;} addlist(); w_li = a.find("li").width(); margin_li=parseInt(a.find("li").css("marginLeft")); a.find("ul").css({"width":(w_li+margin_li*2)*(lisize+addli)}); a.find("ul").animate({"margin-left":0});//ul位置還原 btnshow(now,parseInt((lisize+addli)/num),lisize,num); }); function addlist(){ for(i=0;i<addli;i++){ var html = a.find("ul li").eq(i).html(); a.find("ul").append("<li>"+html+"</li>"); } a.find("ul").css({"width":(w_li+margin_li*2)*(lisize+addli)}); //console.log(a.find("ul li").size()); } function photoscroll(){ a.find(".ps_pre").on("click",function(){//console.log(num); now--; if(now >= 0){ a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)}); btnshow(now,parseInt((lisize+addli)/num),lisize,num); } }); a.find(".ps_next").on("click",function(){//console.log(num); now++; if(now < (lisize+addli)/num){ a.find("ul").animate({"margin-left":-now*num*(w_li+margin_li*2)}); btnshow(now,parseInt((lisize+addli)/num),lisize,num); } }); btnshow(now,parseInt((lisize+addli)/num),lisize,num); } /*** 參數說明： now:當前是第幾組，默認是0 c:總共有幾組 d:初始化時li的個數 e:每組顯示li個數 ***/ function btnshow(now,c,d,e){ if(d<=e){//如果初始化時li的個數小于一組要顯示的數，則不顯示pre和next按鈕 a.find(".ps_next").hide(); a.find(".ps_pre").hide(); }else if(now==0){//初始化now=0，顯示第一組，只顯示next a.find(".ps_next").show(); a.find(".ps_pre").hide(); }else if(now==c-1){//顯示到最后一組，只顯示pre a.find(".ps_next").hide(); a.find(".ps_pre").show(); }else{//顯示中間組，pre和next都需要顯示 a.find(".ps_next").show(); a.find(".ps_pre").show(); } } }})(jQuery); $.photolist($("#activity-slide"));</script>
新聞熱點
疑難解答
