jquery问题，求教高手

下面代码是想通过jquery实现一组一组照片的切换，下面代码是以4张照片为一页，当点击下一页的时候跳转到第2页也就是第5张照片，同时1234相应页码也高亮显示，求教高手下面代码哪里错了<html>
<head>
<title>jquery中的事件实现切换</title>
<style type="text/css">
  #current{
  color:#FF3300;
  background:#CC3300;
  }
  .v_content_list{
  height:100px;
  width:600px;
  }
  #v_content{
  height:100px;
  width:600px;
  overflow:hidden;
  }
  .next{
  cursor:pointer;
  }
  .prev{
  cursor:pointer;
  }
</style>
<script src="jquery.min.js" src="jquery-1.1.3.1.min.js" src="jquery-1.2.3.js"></script>
<script>
$(function(){
   var page=1;
   var i=4;
   $("span.next").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");
   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;
 alert(page);
   }else{
     $v_show.animate({left:"-=100px"},"slow");
 page++;
 alert(page);
   }
  }
   $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");   
   });
});
</script>
<style type="text/css">
.v_content_list ul li{
list-style-type:none;
float:left;
padding:10px;
}
</style>
</head>
<body>
  <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 id="v_content">
 <div class="v_content_list">
    <ul>
    <li><a href="#"><img src="1.JPG" width="100px" height="100px" /><h4><a href="#">风景1</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="1.JPG" width="100px" height="100px" /><h4><a href="#">风景2</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="1.JPG" width="100px" height="100px" /><h4><a href="#">风景3</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="1.JPG" width="100px" height="100px" /><h4><a href="#">风景4</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="2.JPG" width="100px" height="100px" /><h4><a href="#">风景5</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="2.JPG" width="100px" height="100px" /><h4><a href="#">风景6</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="2.JPG" width="100px" height="100px" /><h4><a href="#">风景7</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="2.JPG" width="100px" height="100px" /><h4><a href="#">风景8</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="3.JPG" width="100px" height="100px" /><h4><a href="#">风景9</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="3.JPG" width="100px" height="100px" /><h4><a href="#">风景10</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="3.JPG" width="100px" height="100px" /><h4><a href="#">风景11</a></h4><span>播放:<em>2876</em></span></li>
<li><a href="#"><img src="3.JPG" width="100px" height="100px" /><h4><a href="#">风景12</a></h4><span>播放:<em>2876</em></span></li>
</ul>
  </div>
  </div>
</body>
</html>

解决方案 »

  1.   

    <html>
    <head>
    <title>jquery中的事件实现切换</title>
    <style type="text/css">
      .current{
      color:#FF3300;
      background:#CC3300;
      }
      .v_content_list{
      height:100px;
      width:600px;
      }
      #v_content{
      height:100px;
      width:600px;
      overflow:hidden;
      }
      .next{
      cursor:pointer;
      }
      .prev{
      cursor:pointer;
      }
    </style>
    <script type="text/javascript" src="http://www.wanmei.com/public/js/jq_132.js"></script>
    <script>
    $(function(){
      var page=1;
      var i=4;
      $("span.next").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");
    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;
    alert(page);
    }else{
    $v_show.animate({left:"-=100px"},"slow");
    page++;
    alert(page);
    }
    }
    $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");   
      });
    });
    </script>
    <style type="text/css">
    .v_content_list ul li{
    list-style-type:none;
    float:left;
    padding:10px;
    }
    </style>
    </head>
    <body>
      <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 id="v_content">
    <div class="v_content_list">
    <ul>
    <li><a href="#"><img src="1.JPG" width="100px" height="100px" /><h4><a href="#">风景1</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="1.JPG" width="100px" height="100px" /><h4><a href="#">风景2</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="1.JPG" width="100px" height="100px" /><h4><a href="#">风景3</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="1.JPG" width="100px" height="100px" /><h4><a href="#">风景4</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="2.JPG" width="100px" height="100px" /><h4><a href="#">风景5</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="2.JPG" width="100px" height="100px" /><h4><a href="#">风景6</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="2.JPG" width="100px" height="100px" /><h4><a href="#">风景7</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="2.JPG" width="100px" height="100px" /><h4><a href="#">风景8</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="3.JPG" width="100px" height="100px" /><h4><a href="#">风景9</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="3.JPG" width="100px" height="100px" /><h4><a href="#">风景10</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="3.JPG" width="100px" height="100px" /><h4><a href="#">风景11</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="3.JPG" width="100px" height="100px" /><h4><a href="#">风景12</a></h4><span>播放:<em>2876</em></span></li>
    </ul>
      </div>
      </div>
    </body>
    </html>
      

  2.   

     #current{
      color:#FF3300;
      background:#CC3300;
      }
    改成 .current{
      color:#FF3300;
      background:#CC3300;
      }
      

  3.   

    <script src="jquery.min.js" src="jquery-1.1.3.1.min.js" src="jquery-1.2.3.js"></script>改成<script type="text/javascript" src="http://www.wanmei.com/public/js/jq_132.js"></script>
      

  4.   


    <html>
    <head>
    <title>jquery中的事件实现切换</title>
    <style type="text/css">
      .current{
      color:#FF3300;
      background:#CC3300;
      }
      .v_content_list{
      height:120px;
      width:1200px;
      position:absolute;
      left:0px;
      }
      #v_content{
      height:120px;
      width:540px;
      overflow:hidden;
      }
      .next{
      cursor:pointer;
      }
      .prev{
      cursor:pointer;
      }
    </style>
    <script type="text/javascript" src="http://www.wanmei.com/public/js/jq_132.js"></script>
    <script>
    $(function(){
      var page=1;
      var i=4;
      $("span.next").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");
    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:"-=500px"},"slow");
    page++;
    }
    }
    $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");   
      });
    });
    </script>
    <style type="text/css">
    .v_content_list ul li{
    list-style-type:none;
    float:left;
    padding:10px;
    }
    </style>
    </head>
    <body>
      <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 id="v_content">
    <div class="v_content_list">
    <ul>
    <li><a href="#"><img src="1.JPG" width="100px" height="100px" alt="1" /><h4><a href="#">风景1</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="1.JPG" width="100px" height="100px" alt="2" /><h4><a href="#">风景2</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="1.JPG" width="100px" height="100px" alt="3" /><h4><a href="#">风景3</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="1.JPG" width="100px" height="100px" alt="4" /><h4><a href="#">风景4</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="2.JPG" width="100px" height="100px" alt="5" /><h4><a href="#">风景5</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="2.JPG" width="100px" height="100px" alt="6" /><h4><a href="#">风景6</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="2.JPG" width="100px" height="100px" alt="7" /><h4><a href="#">风景7</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="2.JPG" width="100px" height="100px" alt="8" /><h4><a href="#">风景8</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="3.JPG" width="100px" height="100px" alt="9" /><h4><a href="#">风景9</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="3.JPG" width="100px" height="100px" alt="10" /><h4><a href="#">风景10</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="3.JPG" width="100px" height="100px" alt="11" /><h4><a href="#">风景11</a></h4><span>播放:<em>2876</em></span></li>
    <li><a href="#"><img src="3.JPG" width="100px" height="100px" alt="12" /><h4><a href="#">风景12</a></h4><span>播放:<em>2876</em></span></li>
    </ul>
      </div>
      </div>
    </body>
    </html>样式跟位置自己调调吧