jquery 图片横向动态展示

今天用jquery写了一个简单的图片横向动态展示，使用jquery极大的简化了js，对于jquery的初学者来说也容易理解。
【原理简述】
1、在此只添加了向右移动的按钮，添加向左的按钮的jquery代码，改变这些代码 if(page == page_count){
              jq2.animate({left:'-0px'},'slow');
              page = 1;
           }else{
               jq2.animate({left:'-0'+page*jqwidth},'slow');
               page++;
           }；
2、使用animate（）函数，jquery中的移动函数；
【源码】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery图片横向动态展示</title>
<style>
*{padding:0px; margin:0 auto;}
ul{ list-style-type:none;}
.container{ 650px; height:290px; overflow:hidden; margin:30px auto 0px; position:relative;}
.box{3000px; height:290px; position:absolute; top:0px; left:0px;}
.box ul li{ float:left;}
.next{ background:url(img/arrowLeft.jpg) no-repeat; 40px; height:60px; position:absolute; right:15px; top:130px; cursor:pointer;}
.smallPic{ position:absolute; top:270px; left:250px;   }
.smallPic ul{ }
.smallPic ul li{ float:left; background:url(img/tip2.gif) no-repeat; 7px; height:7px; margin:5px;}
.smallPic ul li.current{ background:url(img/2.gif) no-repeat;}
</style>
<script type="text/javascript" src="http://zyx475324688.blog.163.com/blog/jquery-1.3.2.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
     var page =1;
     $(".next").click(function(){
        var jq1 = $(this).parents(".container");
        var jq2 = jq1.find(".box");
        var jqwidth = jq1.width();
        var page_count = jq2.find("li").length;
        if(!jq2.is(":animated")){
            if(page == page_count){
              jq2.animate({left:'-0px'},'slow');
              page = 1;
             }else{
               jq2.animate({left:'-0'+page*jqwidth},'slow');
               page++;
             }
             var cur = page -1;
             $(".smallPic li").eq(cur).addClass("current").siblings().removeClass("current");
         }
     });
  });
</script>
</head>

<body>
<div class="container">
  <div class="box">     
     <ul>
       <li><a href="http://zyx475324688.blog.163.com/blog/#"><img src="http://zyx475324688.blog.163.com/blog/img/img2.jpg" /></a></li>
       <li><a href="http://zyx475324688.blog.163.com/blog/#"><img src="http://zyx475324688.blog.163.com/blog/img/img3.jpg" /></a></li>
       <li><a href="http://zyx475324688.blog.163.com/blog/#"><img src="http://zyx475324688.blog.163.com/blog/img/img4.jpg" /></a></li>
       <li><a href="http://zyx475324688.blog.163.com/blog/#"><img src="http://zyx475324688.blog.163.com/blog/img/img5.jpg" /></a></li>
     </ul>
  </div>
  <div class="next">
  </div>
  <div class="smallPic">
     <ul>
       <li class="current"></li>
       <li></li>
       <li></li>
       <li></li>
     </ul>
  </div>
</div>
</body>
</html>

【效果展示】

jquery图片横向动态展示 - 475324688 - 475324688的博客