javascript实现图片轮播


请教,如何用javascript实现图片轮播?

解决方案 »

  1.   

    有两种思路：
    一：N个DIV，每个DIV里面放一张图片。然后按时间设定DIV的display属性。这N个DIV的位置要一样。
    二：一个DIV里面放N张图片，然后按时间设置每张图片的Z-INDEX属性。
      

  2.   

    之前有人提问，这是一种效果<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
     </head>
     <style>
     .item{height:92px;overflow:hidden;border-bottom:1px solid #EFEFEF;margin-bottom:10px;color:blue}
     </style>
    <script type="text/javascript" src="jquery-1.6.4.min.js"></script></head>
    <body>
    <div id="testID" style="height:450px;overflow: hidden;">
    <div class="item">111111</div>
    <div class="item">222222</div>
    <div class="item">333333</div>
    <div class="item">444444</div>
    <div class="item">555555</div>
    <div class="item">666666</div>
    <div class="item">777777</div>
    <div class="item">888888</div>
    <div class="item">999999</div>
    </div>
    </body><script>
    $(function() {
        //滚动函数
        function scroll(){
            //每次将第一个div移到尾部
            $("#testID").append(function(){
                return $(this).find(".item:first");
            });
            //将第一个div以0毫秒的速度收起来，然后再以2000毫秒的速度往下滑动
            $(".item:first").slideUp(0).slideDown(2000);
        }
        //每2000毫秒执行一次滚动函数
        var timeObj = setInterval(function(){
            scroll();
        }, 2000)
        
        //鼠标移入DIV时取消滚动，移出时继续滚动
        $("#testID").mouseover(function(){
            clearInterval(timeObj);
        }).mouseout(function(){
            timeObj = setInterval(function(){
                scroll();
            }, 2000)
        });
    });    
    </script>
    </html>
      

  3.   

    用html属性就可以实现图片轮播，写那么多js多麻烦？
      

  4.   

    求指教。。  用什么html属性呢？
    谢谢