JQuery滑动效果（特别的好用哦）

<script type="text/javascript">
    var page=1;//当前页（像分页一样的）
    var i=4;//每页显示多少个
    //点下一页情况分析。当前页为最后一页时，再点击就跳转到第一版面。page设为1，如果不是最后一页的话，就用视频展示区域宽度--减视频实际的宽度
     $(function(){
         $(".next").click(function(){//给下一页绑定事件
            var $v_vshow=$(".v_content_list");//视频的总体部份
            var v_width=$(".v_content").width();//视频能显示的大小，就是父类的大小
            var len=$(".v_content li").length;//视频数量
            var page_count=Math.ceil(len/i);//一共要多少页显示完
            
            if(page==page_count){//当为最后一页时，将视频总体部份移到 left=0;page=1
               $v_vshow.animate({left:'0px'},'slow');
               page=1;
            }else{//否则就将视频总体部份的left-(视频能显示的)宽度
             $v_vshow.animate({left:'-='+v_width},'slow');
             page++;
             }
            $(".highlight_tip span").eq(page-1).addClass("current").siblings().removeClass("current");
         
         });
         
         
         $(".prev").click(function(){
            var $v_vshow=$(".v_content_list");//视频的总体部份
            var v_width=$(".v_content").width();//视频能显示的大小，就是父类的大小
            var len=$(".v_content li").length;//视频数量
            var page_count=Math.ceil(len/i);//一共要多少页显示完
            if(page==1){//当为第一页时，将视频最后的部份，移动过来，page=page_count
                $v_vshow.animate({left:'-='+v_width*(page_count-1)},1000);
              page=page_count;
            }else{//否则就将视频总体部份的left+(视频能显示的)宽度
             $v_vshow.animate({left:'+='+v_width},1000);
              page--;
            
            }
            $(".highlight_tip span").eq(page-1).addClass("current").siblings().removeClass("current");
         
         
         });
     
     });



  </script>

<div class="v_show">
	<div class="v_caption">
		<h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
		<div class="highlight_tip">
			<span class="current">1</span><span>2</span><span>3</span><span>4</span>
		</div>
		<div class="change_btn">
			<span class="prev" >上一页</span>
			<span class="next">下一页</span>
		</div>
		<em><a href="#">更多>></a></em>
	</div>
	<div class="v_content">
	
		<div  class="v_content_list">
			<ul>
				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
				<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
		     </ul>
		</div>
	</div>
</div>

用的是锋利JQuery上面的例子，自己写了一遍。

主要条件：

.v_content { position:relative; width:592px; height:160px; overflow:hidden; } 父类
.v_content_list { position:absolute; width:2500px;top:0px; left:0px; }子类

还有就是移动的时候，临界条件的把握。