圖檔橫向滾動效果

<div id="photo-list"></div>

function initOnloadAction(domain,urls,page_id){

var id = function(el) { 

return document.getElementById(el); 

}, 

c = id('photo-list'); 

//生成動态圖檔

var urllist=urls.split(",");

var imgHtml="<ul id='scroll'>";

for(var i=0;i<urllist.length;i++){

imgHtml+="<li><img src='"+domain+urllist[i]+"'width='160px' height='220px' alt='' /></li>";

}

imgHtml+="</ul>";

c.innerHTML=imgHtml;

if(c) { 

var ul = id('scroll'), 

lis = ul.getElementsByTagName('li'), 

itemCount = lis.length, 

width = lis[0].offsetWidth, //獲得每個img容器的寬度 

marquee = function() { 

c.scrollLeft += 2; 

if(c.scrollLeft % width<=1){  //當 c.scrollLeft 和 width 相等時，把第一個img追加到最後面 

ul.appendChild(ul.getElementsByTagName('li')[0]); 

c.scrollLeft = 0; 

}; 

speed = 50; //數值越大越慢 

ul.style.width = width*itemCount + 'px'; //加載完後設定容器長度 

var timer = setInterval(marquee, speed); 

c.onmouseover = function() { 

clearInterval(timer); 

c.onmouseout = function() { 

timer = setInterval(marquee, speed); 

};

#photo-list {

     /* 寬度為4張圖檔的寬度

     */

    width:640px;

    /*高度一緻

    */

    height:220px;

    overflow:hidden;

/* 加入其它樣式 */

#photo-list ul { list-style:none;}

#photo-list li { float:left;}

#photo-list img { border:1px solid #FFFFFF; background:#fff; padding:2px;}

      本文轉自tianjian_0913 51CTO部落格，原文連結：http://blog.51cto.com/tianjian/1665996，如需轉載請自行聯系原作者