RT.

不多說,馬上開始.

首先是圖片的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;
}
 

    <!--頁面中圖片重複滾動程式碼-->
    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)};