body中增加div

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

js中写入onload方法(domainurls)传入图片地址与域名,(图片最少5张,显示4张)

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); 

}; 

};

}

css中加入样式控制

#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 #FFFFFFbackground:#fffpadding:2px;}