|
$(function () {
2 var page = 1;//初始化page變量 3 var i = 2;//每版放兩組圖片 4 var $pictureShow = $(".pictures4"); 5 var downwidth = $pictureShow.width();//獲取框架內(nèi)容的寬度，既每次移動(dòng)的大小 6 var len = $(".picturescontent4").find('ul').length;//找到一共有幾組圖片 7 var page_number = Math.ceil(len / i);//找到一共有多少個(gè)版面 8 $("#symbol4b").click(function () { 9 if (!$(".picturescontent4").is(":animated")) {//判斷是否正在執(zhí)行動(dòng)畫效果 10 if (page == page_number) {//已經(jīng)到最后一個(gè)版面了,如果再向后，必須跳轉(zhuǎn)到第一個(gè)版面。 11 $(".picturescontent4").animate({ left: '0px' }, "slow");//通過改變left值，跳轉(zhuǎn)到第一個(gè)版面 12 page = 1; 13 } else { 14 $(".picturescontent4").animate({ left: '-=' + downwidth }, "slow");//通過改變left值，達(dá)到每次換一個(gè)版面 15 page++; 16 } 17 } 18 return false; 19 }); 20 $("#symbol4a").click(function () { 21 if (!$(".picturescontent4").is(":animated")) { 22 if (page == 1) {//已經(jīng)到第一個(gè)版面了,如果再向前，必須跳轉(zhuǎn)到最后一個(gè)版面 23 $(".picturescontent4").animate({ left: '-=' + downwidth * (page_number - 1) }, "slow");//通過改變left值，跳轉(zhuǎn)到最后一個(gè)版面 24 page = page_number; 25 } else { 26 $(".picturescontent4").animate({ left: '+=' + downwidth }, "slow");//通過改變left值，達(dá)到每次換一個(gè)版面 page--; } } return false; }); }); 
1 <div class="pictures4"> 2 <div class="picturescontent4"> 3 <ul class="pictures2ul3"> 4 <li class="li13"> 5 <a class="commona" href="#"><img class="picture" src="i/圖片13.png" alt="圖片13"/> </a> 6 </li> 7 <li class="li15"> 8 <a" class="commona" href="#"><img class="picture" src="i/圖片15.png" alt="圖片15"/> </a> 9 </li> 10 </ul> 11 <ul class="pictures2ul4"> 12 <li class="li14"> 13 <a class="commona" href="#"><img class="picture" src="i/圖片14.png" alt="圖片14"/> </a> 14 </li> 15 <li class="li16"> 16 <a class="commona" href="#"><img class="picture" src="i/圖片16.png" alt="圖片16"/> </a> 17 </li>
18 </ul> 19 <ul class="pictures2ul1"> 20 <li class="li1"> 21 <a class="commona" href="#"><img class="picture" src="i/圖片1.png" alt="圖片1"/> </a> 22 </li> 23 <li class="li3"> 24 <a class="commona" href="#"><img class="picture" src="i/圖片3.png" alt="圖片3"/> </a> 25 </li> 26 </ul> 27 <ul class="pictures2ul2"> 28 <li class="li2"> 29 <a class="commona" href="#"><img class="picture" src="i/圖片2.png" alt="圖片2"/> </a> 30 </li> 31 <li class="li4"> 32 <a class="commona" href="#"><img class="picture" src="i/圖片4.png" alt="圖片4"/> </a> 33 </li> 34 </ul> 35 <ul class="pictures2ul5"> 36 <li class="li9"> 37 <a class="commona" href="#"><img class="picture" src="i/圖片9.png" alt="圖片9"/> </a> 38 </li> 39 <li class="li11"> 40 <a" class="commona" href="#"><img class="picture" src="i/圖片11.png" alt="圖片11"/> </a> 41 </li> 42 </ul> 43 <ul class="pictures2ul6"> 44 <li class="li10"> 45 <a class="commona" href="#"><img class="picture" src="i/圖片10.png" alt="圖片10"/> </a> 46 </li> 47 <li class="li12"> 48 <a class="commona" href="#"><img class="picture" src="i/圖片12.png" alt="圖片12"/> </a> 49 </li> 50 </ul> 51 </div> 52 </div> 1 .pictures2ul1,.pictures2ul2 ,.pictures2ul3,.pictures2ul4,.pictures2ul5,.pictures2ul6 2 { 3 margin-top:0px; 4 margin-right:17px; 5 padding:0px; 6 width: 122px; 7 float:left; 8 list-style-type:none;} 9 .pictures4 10 { 11 height:111px; 12 position:absolute; 13 overflow:hidden; 14 width:278px; 15 } 16 .picturescontent4 //其中設(shè)置position了，才能在JavaScript用left控制。 17 { 18 position:absolute; 19 float:left; 20 width:834px; 21 }
|
|
|
