图片横向滚动效果

标签：jsp

在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;}

图片横向滚动效果

标签：jsp

原文地址：http://tianjian.blog.51cto.com/3549910/1665996