基于jquery实现点击左右按钮图片横向滚动

点击左右按钮图片横向滚动jquery，一次滚动四个，图片滚动完成，自动回到第一个版面：效果图如下

复制代码代码如下：DOCTYPE html html lange=' en ' head title点击左右按钮图片横向滚动/title meta charset=utf-8 '/style type=' text/CSS ' * { margin 33600；划水：0;}正文{ font-size :12 px} .盒子{ height:66pxfloat:left宽度宽度：440像素飞越：隐藏；位置：相对；} .方框Li { display : block float : left边距-左侧：5 px右边距：5 px宽度宽度：100像素高度：70 px背景# BBB font-size :50 px；color: # ccc线高：66 px文本装饰：无；文本对齐：居中；光标：指针指针；} .box li:悬停{ color : # 999} .李。活动{背景-位置：-174 px 0；color : # 555 cursor : default } a . prev，a . next { background : URL(http://www .盛易捷。网络/图片/左_ 02。png)无重复0 0；显示：块；宽度：23 pxheight :43 pxfloat : leftmargin 336015 px 0 0 cursor :指针指针；} a . next { background-image : URL(http://www。盛易捷。网络/图片/右_ 02。png)} .scroll _ list { width:10000em位置：绝对；} /style！-引入jQuery-脚本src=' http :http://JT。875 .cn/js/jQuery。js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(function(){ var page=1；var I=4；//每版四个图片//向右滚动$('.下一个')。单击(函数(){ //点击事件var v_wrap=$(this).父母('。卷轴');//根据当前点击的元素获取到父元素var v_show=v_wrap.find ' .scroll _ list’)；//找到视频展示的区域var v_cont=v_wrap.find ' .方框');//找到视频展示区域的外围区域var v _ width=v _ cont。宽度()；var len=v_show.find('li ').长度；//我的视频图片个数var page _ count=数学。天花板(透镜/1)；//只要不是整数，就往大的方向取最小的整数if(！v _ show。is(' :动画'){ if(page==page _ count){ v _ show。动画({ left : ' 0px ' }，' slow ')；page=1；} else { v _ show。动画({ left : '-=' v _ width }，' slow ')；页面；} } });//向左滚动$('.prev ').单击(函数(){ //点击事件var v_wrap=$(this).父母('。卷轴');//根据当前点击的元素获取到父元素var v_show=v_wrap.find ' .scroll _ list’)；//找到视频展示的区域var v_cont=v_wrap.find ' .方框');//找到视频展示区域的外围区域var v _ width=v _ cont。宽度()；var len=v_show.find('li ').长度；//我的视频图片个数var page _ count=数学。天花板(透镜/1)；//只要不是整数，就往大的方向取最小的整数if(！v _ show。is(' :动画'){ if(page==1){ v _ show。动画({ left : '-=' v _ width *(page _ count-1)}，' slow ')；page=page _ count} else { v _ show。动画({ left : '=' v _ width '，' slow ')；页面-;} } });});/剧本/头身！-例子-div class=' scroll ' style=' margin 33600 auto；宽度宽度：550像素！-'上一页'链接-a class=' prev ' href=' # '/a div=' box ' div=' scroll _ list ' ul li1/Li Li 2/Li Li/Li Li 4/Li Li 5/Li Li 6/Li Li 7/Li Li 8/Li Li 9/Li Li 10/李丽丽11/李丽丽12/李丽丽13/李丽丽14/李丽丽15/李丽丽16/Li/ul/div/div！-'下一页'链接-a class=' next ' href=' # '/a/div/body/html