點擊左右按鈕圖片橫向滾動jquery，一次滾動四個，圖片滾動完成，自動回到第一個版面： 效果圖如下： 複製程式碼 程式碼如下: 點擊左右按鈕圖片橫向捲動 <BR>* { margin:0; padding:0;} <BR>body { font-size:12px;} <BR>.box {height:66px; float:left; width:440px; overflow: hidden; position:relative; } <BR>.box li { display:block; float:left; margin-left:5px; margin-right:5px; width:100px; height:70px;background:#BBB;font-size:50pxcolor:#ccc; line-height:66px;text-decoration:none;text-align:center; cursor:pointer;} <BR>.box li:hover { color:#999; } <BR>.box li.active { background-position :-174px 0; color:#555;cursor:default;} <BR>a.prev, a.next {background:url(http://www.shengyijie.net/images/left_02.png) no-repeat 0 0; display:block;width:23px;height:43px; float:left; margin:15px 0 0 0; cursor:pointer;} <BR>a.next { background-image:url(http://www.shengyijie .net/images/right_02.png)} <BR>.scroll_list{ width:10000em; position:absolute; } <BR> <BR>$(function( ){ <BR>var page= 1; <BR>var i = 4;//每版四張圖片<BR>//向右捲動<BR>$(".next").click(function(){ //點選事件<BR>var v_wrap = $(this).parents(".scroll"); // 依照目前點擊的元素取得到父元素<BR>var v_show = v_wrap.find(".scroll_list"); //找到影片展示的區域<BR>var v_cont = v_wrap.find(".box"); //找到影片展示區域的外圍區域<BR>var v_width = v_cont.width(); <BR>var len = v_show.find("li").length; //我的影片圖片個數<BR>var page_count = Math.ceil(len/i); //只要不是整數，就往大的方向取最小的整數<BR>if(!v_show.is(":animated")){ <BR>if(page == page_count){ <BR>v_show.animate({left:'0px'},"slow"); <BR> page =1; <BR>}else{ <BR>v_show.animate({left:'-=' v_width},"slow"); <BR>page ; <BR>} <BR>} <BR>}) ; <BR>//向左捲動<BR>$(".prev").click(function(){ //點擊事件<BR>var v_wrap = $(this).parents(".scroll"); / / 根據目前點擊的元素取得到父元素<BR>var v_show = v_wrap.find(".scroll_list"); //找到影片顯示的區域<BR>var v_cont = v_wrap.find(".box"); / /找到視訊展示區域的外圍區域<BR>var v_width = v_cont.width(); <BR>var len = v_show.find("li").length; //我的影片圖片數量<BR>var page_count = Math.ceil(len/i); //只要不是整數，就往大的方向取最小的整數<BR>if(!v_show.is(":animated")){ <BR>if(page == 1){ <BR>v_show.animate({left:'-=' v_width*(page_count-1)},"slow"); <BR>page =page_count; <BR>}else{ <BR>v_show.animate ({left:' =' v_width},"slow"); <BR>page--; <BR>} <BR>} <BR>}); <BR>}); <BR> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
