【高分】求一个jquery滚动效果（锋利的juqery实例改编）

Question

锋利的 juqery书上有一个实例  是关于滚动条效果的 大概代码实现如下$(function(){
    var page = 1;
    var i = 4; 
    $("span.next").click(function(){    
     var $parent = $(this).parents("div.v_show");
 var $v_show = $parent.find("div.div1"); 
 var $v_content = $parent.find("div.v_content");
 
 var  $v_li = $parent.find("div.piclist");
  
 var v_width = $v_content.width() ;
 var len = $v_show.find("li").length;
 var page_count = Math.ceil(len / i) ;   
 if( !$v_show.is(":animated") ){  
  if( page == page_count ){  
$v_show.animate({ left : '0px'}, "slow");
page = 1;
}else{
$v_show.animate({ left : '-='+v_li }, "slow");
  
page++;
 }
 }
});
$("span.prev").click(function(){
     var $parent = $(this).parents("div.v_show");
 var $v_show = $parent.find("div.div1"); 
 var $v_content = $parent.find("div.v_content"); 
 var v_width = $v_content.width();
 var len = $v_show.find("li").length;
 var page_count = Math.ceil(len / i) ;   
 if( !$v_show.is(":animated") ){   
   if( page == 1 ){  
$v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");
page = page_count;
}else{
$v_show.animate({ left : '+='+v_width }, "slow");
page--;
}
}
});
});这段我能看得懂 我想求一个关于每次 我按按钮只滚动一个图片的代码 而不是一滚动就翻一页 高分求

Answer 1

你既然有实例，那就将相关的HTML代码和CSS代码也帖上来

Answer 2

html<div id="main">

<div id="bodyer" class="v_show" style=" border:#CCC solid 1px; width:605px; border-bottom-color:#FFF;">
     <div class="v_content">
            <div class="div1 con1">
             <ul>
                    <li class="piclist"><a  href="images/pic1s.JPG" class="preview"><img src="images/pic1.jpg"></a></li>
                    <li class="piclist"><a  href="images/pic2s.JPG" class="preview"><img src="images/pic2.jpg"></a></li>
                    <li class="piclist"><a  href="images/pic3s.JPG" class="preview"><img src="images/pic3.jpg"></a></li>
                    <li class="piclist"><a  href="images/pic4s.JPG" class="preview"><img src="images/pic4.jpg"></a></li>
                    <li class="piclist"><a  href="images/pic1s.JPG" class="preview"><img src="images/pic1.jpg"></a></li>
                    <li class="piclist"><a  href="images/pic2s.JPG" class="preview"><img src="images/pic2.jpg"></a></li>
                    <li class="piclist"><a  href="images/pic3s.JPG" class="preview"><img src="images/pic3.jpg"></a>></li>
                    <li class="piclist"><a  href="images/pic4s.JPG" class="preview"><img src="images/pic4.jpg"></a></li>
             </ul>
            </div>
        </div>
        <div class="changebtn">
        <span class="prev">上一页</span>
            <span class="next">下一页</span>
        </div>
        <div class="clear"></div>
</div>
css:@charset "utf-8";
body{
font-size:12px;
/* [disabled]color:#000000; */
}
ul,li{ margin:0px;padding:0px;list-style:none;}#main{ width:607px;margin:15% auto;overflow:hidden}#header{height:38px;overflow:hidden;}
#header ul li{ width:auto; height:38px; float:left; margin-right:2px;  padding-left:15px;  background:url(../images/bg1.gif) no-repeat 0 -42px; line-height:40px; }
#header ul li span{  height:38px; line-height:38px; float:left;  padding-right:15px; background:url(../images/bg1.gif) no-repeat right -42px;}
#header ul .current { position:relative;background-position: 0 0; z-index:999; }
#header ul .current span {background-position: right 0; }
#bodyer { position:relative; z-index:99; margin-top:-1px; }
#bodyer .v_content{  position:relative;height:150px; overflow:hidden; width:605px;}
#bodyer .piclist{ width:120px; height:150px;float:left;padding:0px 14px 5px 14px;margin-top: 0px;}
#bodyer p{ font:Verdana, Geneva, sans-serif; font-size:12px;}
.v_content ul {float:left;}
.v_content ul li { display:inline;float:left; }
.v_content ul li img{ margin-bottom: 12px;}
.v_content ul li a{ margin-top:12px;}.clear{clear:both;font-size:0px;overflow:hidden;height:0px;}div.con1{clear:left;width:300px;height:100px;padding:10px;display:none; }
div.div1{ display:inline; position:absolute; width:2500px;top:0px; left:0px;}
div.changebtn { clear:left; margin-left:480px; width:120px;cursor:pointer;}
div.changebtn span{ width:50px; margin-right:10px; background-color:#9C0;}
#footer{width:607px;height:6px;overflow:hidden;}#preview{position:absolute;border:1px solid #ccc;background:#333;padding:5px;display:none;color:#fff;z-index:9999;}css代码 部分有的没用 我就都给弄上来了 帮帮忙 谢谢拉

Answer 3

$(function(){
    var page = 1;
    var i = 4; //每版放4个图片
    //向后 按钮
    $("span.next").click(function(){    //绑定click事件
     var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
 var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
 var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
 var v_width = $v_content.width()/i ;
 var len = $v_show.find("li").length;
 if( !$v_show.is(":animated") ){    //判断“视频内容展示区域”是否正在处于动画
  if( page ==len ){  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
$v_show.animate({ left : '0px'}, "slow"); //通过改变left值，跳转到第一个版面
page = 1;
}else{
$v_show.animate({ left : '-='+v_width }, "slow");  //通过改变left值，达到每次换一个版面
page++;
 }
 }
 $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
   });
    //往前 按钮
    $("span.prev").click(function(){
     var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
 var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
 var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
 var v_width = $v_content.width()/i;
 var len = $v_show.find("li").length;
 if( !$v_show.is(":animated") ){    //判断“视频内容展示区域”是否正在处于动画
   if( page == 1 ){  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
$v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");
page = page_count;
}else{
$v_show.animate({ left : '+='+v_width }, "slow");
page--;
}
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
    });
});
</script>

Answer 4

不好意思，再次修改一下$(function(){
    var page = 1;
    var i = 4; //每版放4个图片
    //向后 按钮
    $("span.next").click(function(){    //绑定click事件
     var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
 var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
 var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
 var v_width = $v_content.width()/i ;
 var len = $v_show.find("li").length;
 if( !$v_show.is(":animated") ){    //判断“视频内容展示区域”是否正在处于动画
  if( page ==len ){  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
$v_show.animate({ left : '0px'}, "slow"); //通过改变left值，跳转到第一个版面
page = 1;
}else{
$v_show.animate({ left : '-='+v_width }, "slow");  //通过改变left值，达到每次换一个版面
page++;
 }
 }
 $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
   });
    //往前 按钮
    $("span.prev").click(function(){
     var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
 var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
 var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
 var v_width = $v_content.width()/i;
 var len = $v_show.find("li").length;
 if( !$v_show.is(":animated") ){    //判断“视频内容展示区域”是否正在处于动画
   if( page == 1 ){  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
$v_show.animate({ left : '-='+v_width*(len-1) }, "slow");
page=len;
}else{
$v_show.animate({ left : '+='+v_width }, "slow");
page--;
}
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
    });
});