js实现无缝滚动效果
找了很多无缝滚动的效果，主要用到的函数就是scrollLeft(左边滚动)，自己就重新以自己的想法写了一次了，兼容所有主流浏览器。
<!DOCTYPE HTML>
<html lang="en-CN"><head>
<meta charset="utf-8" />
<title>无缝滚动图片</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none}
.mc{margin:30px auto;}
#gaga{height:92px;width:782px;overflow:hidden;}
.gaga_ul,.gaga_ul1{float:left;}
.gaga_ul li,.gaga_ul1 li{border:1px solid #ccc;margin-right:10px;float:left;width:120px;height:90px;}
#ga_div{height:92px;}
</style>
</head>
<body>
<div id="gaga" class="mc">
<div id="ga_div">
<ul id="ga_ul" class="gaga_ul">
<li><img src="http://pic25.nipic.com/20121202/11511914_223846711115_2.jpg" width="120" height="90" /></li>
<li><img src="http://pic25.nipic.com/20121202/11511914_223940359116_2.jpg" width="120" height="90" /></li>
<li><img src="http://pic18.nipic.com/20120202/6099674_142242467105_2.jpg" width="120" height="90" /></li>
<li><img src="http://pic25.nipic.com/20121202/11511914_224150380124_2.jpg" width="120" height="90" /></li>
<li><img src="http://pic18.nipic.com/20120202/6099674_142242467105_2.jpg" width="120" height="90" /></li>
<li><img src="http://pic25.nipic.com/20121202/11511914_223940359116_2.jpg" width="120" height="90" /></li>
</ul>
<ul class="gaga_ul1" id="ga_ul1"></ul>
<div class="cl"></div>
</div>
</div>
<script>
var Time = 20; // 数值越大动画就慢 反之越快
var ga_ul = document.getElementById("ga_ul"); // 第一组个图片
var ga_ul1 = document.getElementById("ga_ul1"); // 复制出来的图片
var gaga = document.getElementById("gaga"); // 最外层的div
var ul_w = ga_ul.scrollWidth; // 获取一组图片的宽度
var len = ga_ul.getElementsByTagName("li").length; // 获取li的长度
document.getElementById("ga_div").style.width = (ul_w*2 + 20) + "px"; // 设置ga_div的宽度
if( len >= 6 ){ // 如果当图片的数量少于6张的时候就不执行动画
ga_ul1.innerHTML = ga_ul.innerHTML; // 复制一组图片
function sui(){
if(gaga.scrollLeft > ul_w){ // 滚动超出第一组图片的的时候
gaga.scrollLeft = 0;
}else{
gaga.scrollLeft++;
}
}
var fun = setInterval(sui,Time); // 自动播放
gaga.onmouseover = function(){ // 鼠标放上去图片的时候停止动画
clearInterval(fun);
}
gaga.onmouseout = function(){ // 鼠标移开图片的时候继续动画
fun = setInterval(sui,Time);
}
}
</script>
</body>
</html>