在body中增加div：
<div id="photo-list"></div>
在js中写入onload方法（domain，urls）传入图片地址与域名，（图片最少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 #FFFFFF; background:#fff; padding:2px;}
本文转自tianjian_0913 51CTO博客，原文链接：http://blog.51cto.com/tianjian/1665996，如需转载请自行联系原作者
