图片从右向左无间隙滚动代码
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
我自己编写的代码，比较简单易懂，实现效果好，有鼠标划过即停止滚动的功能，代码如下，注意这些代码缺少一行都难以实现，但是套用起来很简单，你可以扩展到无数个图片来回滚动：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script>
var id;
window.onload = function(){
start();
}
var pps;
var x;
var pss;
var xtt;
var t;
var pst;
pps = document.getElementById("pp");
pps.style.left="150px";
function start(){
pps = document.getElementById("pp");
pps.style.left="150px";
x=document.getElementById("tt");
pss = pps.offsetLeft;
xtt = x.offsetLeft;
t =pps.offsetWidth;
pst = x.offsetWidth;
id = setInterval(function(){
xtt--;
x.style.left=xtt+"px";
if(xtt+pst<0){
xtt=t;
}
},10);
}
function stop() {
clearInterval(id);
}
</script>
<style>
#pp{
width:900px;
height:155px;
position:relative;
overflow:hidden;
background-color:grey;
}
#tt{
position:absolute;
width:800px;
height:150px;
}
#tt1{
float:left;
background-color:blue;
width:200px;
height:140px;
}
#tt2{
float:left;
background-color:yellow;
width:200px;
height:140px;
}
#tt3{
float:left;
background-color:red;
width:200px;
height:140px;
}
</style>
<body>
<div id="pp">
<div id="tt" onmouseover="stop();"
onmouseout="start();">
<div id="tt1"><img src="你的图片1路径"/>1</div>
<div id="tt2"><img src="你的图片2路径"/>2</div>
<div id="tt3"><img src="你的图片3路径"/>3</div></div></div>
</body>
</html>
