点击左右按钮图片横向滚动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:50px;color:#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
