scrollLeft轮播无限播怎么写?

<li >
                    <a href="#1">
                    <img src="images/slide.jpg" width="600" height="280"></a>
                </li>
                <li >
                    <a href="#1">
                    <img src="images/slide.jpg" width="600" height="280"></a>
                </li>
                <li >
                    <a href="#1">
                    <img src="images/slide.jpg" width="600" height="280"></a>
                </li>
                <li >
                    <a href="#1">
                    <img src="images/slide.jpg" width="600" height="280"></a>
                </li>
                <li >
                    <a href="#1">
                    <img src="images/slide.jpg" width="600" height="280"></a>
                </li>这个地方，前后再加一份，然后只滚动中间的一份。前后和这个完全相同的代码就可以。看你的代码里，只要改变n的初始值就行了。试试看吧

解决方案 »

  1.   


    <!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>
        <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js
    "></script>
        <style type="text/css">
            .slide{
                width:600px;
                height:280px;
                position: relative;
                border:1px solid;
                overflow: hidden;
            }
            ul,li{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            .slide .box{position:relative;margin-left: -600px;width:1800px;height:280px;overflow: hidden;}
            .slide .list{width:9999px;}
            .slide .list li{float:left;width:600px;height:280px;position: relative;background: #84C1FF}
        </style>
        <script type="text/javascript">
            $(document).ready(function(){
                var index = 0;
                var datas = [1,2,3,4,5,6,7,8];
                var n=-1;
                var sw;
                var lis = $("#slide li");
                $("#slide .crt").html(datas[0]);
                $("#slide .nxt").html(datas[1]);
                auto();
                function auto(){
                    $("#slide .box").animate({marginLeft:-1200},1000,function(){
                        index++;
                        if(index ==datas.length){
                            index = 0;
                        }
                        $("#slide .nxt").after($("#slide .pre"));
                        $("#slide .box").css("marginLeft",-600)
                        var lis = $("#slide li");
                        lis.eq(0).attr("class","pre").html("");
                        lis.eq(1).attr("class","crt");
                        lis.eq(2).attr("class","nxt").html(index == datas.length-1?datas[0]:datas[index + 1]);;
                        setTimeout(auto, 1000);
                    });
                }
            });    </script>
    </head><body>
    <div id="slide" class="slide">
        <div class="box">
            <ul class="list clr">
                <li class="pre">
                </li>
                <li class="crt">
                </li>
                <li class="nxt">
                </li>
            </ul>
        </div>
    </div>
    </body>
    </html>内容部分自己替换一下
      

  2.   

    弄好了,希望之后的封装顺利。
    <!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=utf-8" />
    <title>无标题文档</title>
    <meta name="Description" content="说明" />
    <meta name="Keywords" content="关键词" />
    <link rel="stylesheet" href="/common/common.css" type="text/css" />
    <script type="text/javascript" src="js/jquery.min.js"></script>
    </head>
    <style type="text/css">
    body,ul,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,dd{margin:0px;padding:0px;}
    body{font:12px "宋体","微软雅黑" ;line-height: 22px;}
    li{list-style-type:none;}
    img,input{border:0px;}
    .fl{float:left;}
    .fr{float:right;}/* 清除浮动*/
    .clr:after{  
        content:"";  
        height:0px;  
        visibility:hidden;  
        display:block;  
        clear:both;  
    }    
    .clr{  
        zoom:1;  
    } 
    .slide_x{
    width:600px;
    height:280px;
    position: relative;
    }
    .slide_x .box{position:relative;width:600px;height:280px;overflow: hidden;}
    .slide_x .list{width:9999px;}
    .slide_x .list li{float:left;width:600px;position: relative;}
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
    var n=-1;
    var sw;
    var max=$("#slide_x .box li").length-1;
    at();
    setInterval(at, 3000);
    function at(){
       _now=n;
           _next= n>=max ? 0: ++n;
           sw=_next*600;
           if(_next==0&&_now==max){
          $("#slide_x .box li").eq(0).css({"left":"1800px"});
          sw=1800;
        }else if(_now==0){
           $("#slide_x .box li").eq(0).css({"left":""});
           $("#slide_x .box").scrollLeft(0);
        };
           $("#slide_x .box").animate({"scrollLeft":(sw)});
           n=_next;
    } 
    });

    </script>
    <body>
    <div id="slide_x" class="slide_x">
    <div class="box">
    <ul class="list clr">
    <li><a href="#1"><img src="images/slide_1.jpg" width="600" height="280"></a><p>焦点图说明文字 111</p></li>
    <li><a href="#2"><img src="images/slide_2.jpg" width="600" height="280"></a><p>焦点图说明文字 222</p></li>
    <li><a href="#3"><img src="images/slide_3.jpg" width="600" height="280"></a><p>焦点图说明文字 333</p></li>
    </ul>
    </div>
    </div>
    </body>
    </html>