$(function () {
2 var page = 1;//初始化page变量 3 var i = 2;//每版放两组图片 4 var $pictureShow = $(".pictures4"); 5 var downwidth = $pictureShow.width();//获取框架内容的宽度,既每次移动的大小 6 var len = $(".picturescontent4").find('ul').length;//找到一共有几组图片 7 var page_number = Math.ceil(len / i);//找到一共有多少个版面 8 $("#symbol4b").click(function () { 9 if (!$(".picturescontent4").is(":animated")) {//判断是否正在执行动画效果 10 if (page == page_number) {//已经到最后一个版面了,如果再向后,必须跳转到第一个版面。 11 $(".picturescontent4").animate({ left: '0px' }, "slow");//通过改变left值,跳转到第一个版面 12 page = 1; 13 } else { 14 $(".picturescontent4").animate({ left: '-=' + downwidth }, "slow");//通过改变left值,达到每次换一个版面 15 page++; 16 } 17 } 18 return false; 19 }); 20 $("#symbol4a").click(function () { 21 if (!$(".picturescontent4").is(":animated")) { 22 if (page == 1) {//已经到第一个版面了,如果再向前,必须跳转到最后一个版面 23 $(".picturescontent4").animate({ left: '-=' + downwidth * (page_number - 1) }, "slow");//通过改变left值,跳转到最后一个版面 24 page = page_number; 25 } else { 26 $(".picturescontent4").animate({ left: '+=' + downwidth }, "slow");//通过改变left值,达到每次换一个版面 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 //其中设置position了,才能在JavaScript用left控制。 17 { 18 position:absolute; 19 float:left; 20 width:834px; 21 }
|
|
来自: 昵称10504424 > 《Jquery》