JS如何实现翻页功能？？？

谢谢！我是新手，对JS了解很少，能不能稍微写个简单的例子我参考下呢？
比如现在有个$v里面存了9张图片的路径，有个循环是显示3个<img src=<? echo $v['image'];?>/>,怎样才能让他显示下三张啊?
万分感谢！！！！

<img id=img1></img>
<img id=img2></img>
<img id=img3></img><script language=javascript>
  var arr;
  var istart;  istart = 0;  function nextPage()
  {
     if (istart<arr.getLength()&&istart>arr.getLength()-2)
     {
       img1.src = arr(istart);
       img2.src = arr(istart+1);
       img3.src = arr(istart+2);
       istart += 3;
     }
     else
     {
        if (istart<arr.getLength())
           img1.src = arr(istart+1);
        if (istart<arr.getLength()-1)
           img2.src = arr(istart+2);
     }
  }
  function priorPage()
  {
      if (istart>2)
     {
       img1.src = arr(istart);
       img2.src = arr(istart+1);
       img3.src = arr(istart+2);
       istart -= 3;
     }  }
</script><a href="#" onclick=priorPage()>上一页</a>
<a href="#" onclick=nextPage()>下一页</a>

我用var arr=<?php echo $cc?>;存储了路径数组，但是不行啊
输出是这个<img id='img1' src='' alt="图片描述" />

楼上的代码用var arr=<?php echo $cc?>;存储路径数组可以吗？为什么点击了之后没反应？

啊，这不是我看jQuery书上面的列子吗、、、无条件奉上源代码
你换几张图片就可以看到效果了、、
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="视屏播放切换_._Default" %><!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 runat="server">
    <title>视屏播放功能</title>
    <style type="text/css">
        .hightlight_tip
        {
            top: 24px;
            left: 596px;
            position: absolute;
            height: 17px;
            width: 117px;
        }
        .change_btn
        {
            top: 13px;
            left: 217px;
            position: absolute;
        }
        #more
        {
            height: 20px;
            width: 92px;
            top: 4px;
            left: 600px;
            position: absolute;
        }
        .v_show
        {
            top: 100px;
            left: 267px;
            position: absolute;
            height: 253px;
            width: 717px;
        }
        .v_caption
        {
            height: 39px;
            width: 674px;
            background-color:#EFEFEF;
            }
        .v_content
        {
         overflow:hidden;
         border-right:1px solid #E7E7E7; border-bottom:1px solid #E7E7E7; border-left:1px solid #E7E7E7;
            top: 44px;
            left: 3px;
            position: absolute;
            height: 169px;
            width: 669px;
        }
        .v_content_list
        {
            top: 0px;
            left: 0px;
            position: absolute;
            height: 172px;
            width: 2800px;
        }
        .v_content ul li { display:table-row ; float:left;background:url() no-repeat; width:160px;  padding-left:5px; }
        .v_content ul li img{ border:0px;}
        .change_btn {            width: 77px;
            height: 20px;
        }
        .change_btn  span { position: absolute; display:block; cursor:pointer; }
        .change_btn .prev { position: absolute;
            top: -1px;
            left: -36px;
            width: 31px;
            height: 26px;
        }
        .change_btn .next { position: absolute;
            top: -1px;
            left: -10px;
            width: 32px;
            height: 31px;
        }
        .highlight_tip { display:inline; float:left; margin:14px 0 0 10px; }
        .highlight_tip span { display:inline; float:left; width:7px; height:7px; overflow:hidden; margin:0 2px; background:url(img/btn_cartoon.gif) no-repeat 0 -320px; text-indent:-9999px; }
        .current { color:Red;}
    </style>
</head>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript" >
    $(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:"-="+v_width},"slow");
                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();
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--;
}
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
    });
    });
    </script>
<body>
<div class="v_show">
    <div class="v_caption">
        <h2 title="最新热点视频"

            style="height: 27px; width: 157px; margin-right: 3px; margin-bottom: 10px; top: 11px; left: 8px; position: absolute;">最新热点视频</h2>
        <div class="hightlight_tip">
            页码<span class="current" >1</span><span>2</span><span>3</span><span>4</span>
        </div>
        <div class="change_btn">
            <span class="prev"><input type="button" value="<<<"
                style=" background-image:url('img/left.jpg'); height: 25px; width: 29px;"/></span>
            <span class="next"><input type="button" value=">>>"
                style=" background-image:url('img/right.jpg'); height: 25px; width: 29px;"/></span>
        </div>
        <div id="more"><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="海贼王" style="width: 126px" /></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>

</div></body>
</html>

调试易

JS如何实现翻页功能？？？

解决方案 »