前端页面实现组件从左向右不间断循环滚动

RT.

我之前写过一个关于文字轮播,基于MSclass的.http://blog.csdn.net/killzero/article/details/17790731

现在我将换另外一种方式,来实现类似于这个网页底部的成功案例的效果:http://www.lczscq.com/cn/index.asp

不多说,马上开始.

首先是图片的html排版.这里看你喜好,是喜欢使用表格布局还是div布局.我个人尝试过直接使用ul布局,但是IE7不支持display:inline-block;这一个css属性,导致在IE7以下的浏览器中,li会发生折行.所以还是使用表格布局:

<!--成功案例-->
    <div class="viewBottom" id="viewBottom">
        <p class="bottomTitle">
            <span class="titleCN">成功案例</span>
            <span class="titleEN">Clients</span>
            <br clear="all">
        </p>
        <div class="scrollBox" id="scrollBox">
            <table>
                <tr>
                    <td>
                    <table class="caseList" id="caseList1">
                        <tr>
                        <volist name="caseList" id="caseList">
                            <td class="caseItem">
                                <img class="imgItem" src="{$caseList['imgUrl']}" />
                            </td>
                        </volist>
                        </tr>
                    </table>
                    </td>
                    <td>
                    <table class="caseList" id="caseList3">
                        <tr>
                        <volist name="caseList2" id="caseList2">
                            <td class="caseItem">
                                <img class="imgItem" src="{$caseList2['imgUrl']}" />
                            </td>
                        </volist>
                        </tr>
                    </table>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!--成功案例结束-->

这个方法需要两个一模一样的图片列表,从而实现切换.

css配置:

.viewBottom{
    width:998px;
    height:185px;
    margin: 0 auto;
    border:1px solid #eee;
}
.bottomTitle{
    width:1000px;
    height:45px;
}
.titleCN{
    display:inline-block;
    float: left;
    margin:15px 10px 10px 20px;
    font-size:14px;
    color:#555;
}
.titleEN{
    display:inline-block;
    float: left;
    margin:18px 0 10px 0;
    font-size:12px;
    color:#ccc;
}
.scrollBox{
    width: 960px;
    height:124px;
    margin:0 20px 0 20px;
    overflow: hidden;
}
.caseList{
    width:auto;
    height:132px;
}
.caseItem{
    width:110px;
    height:110px;
    padding:0 10px 0 10px;
}
.imgItem{
    display: block;
    width:100px;
    height:100px;
    padding:5px;
    border:1px solid #eee;
}

JS文件:

    <!--页面中图片重复滚动代码-->
    var speed=15;   //滚动速度
    var tab=document.getElementById("scrollBox"); //用来显示案例的div窗口
    var tab1=document.getElementById("caseList1");//案例图片列表1
    var tab2=document.getElementById("caseList3");//案例图片列表2
    function Marquee(){
        if(tab2.offsetWidth-tab.scrollLeft<=0)
            tab.scrollLeft-=tab1.offsetWidth;
        else{
            tab.scrollLeft++;
        }
    }
    var MyMar=setInterval(Marquee,speed);
    tab.onmouseover=function() {clearInterval(MyMar)};
    tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

话说,其方法应该和MSclass应该是差不多的.哈哈哈.