首先它html布局代码如下:
<div id="demo">
<div id="indemo">
<div id="demo1">
<img src="images/1708111115134704.png" alt="">
<img src="images/1708111115217079.png" alt="">
<img src="images/1708111115283427.png" alt="">
<img src="images/1708111115363129.png" alt="">
<img src="images/1708111115217079.png" alt="">
<img src="images/1708111115283427.png" alt="">
<img src="images/1708111115363129.png" alt="">
<img src="images/1708111115217079.png" alt="">
<img src="images/1708111115283427.png" alt="">
<img src="images/1708111115363129.png" alt="">
<img src="images/1708111116037548.png" alt="">
</div>
<div id="demo2"></div>
</div>
</div>
它的简单css样式布局代码如下:
<style>
#demo {
margin: 100px auto;
background: #FFF;
overflow:hidden;
border: 1px solid #CCC;
width: 1200px;
height: 100px;
padding-top: 8px;
}
#demo img {
border: 1px solid #bbbbbb;
margin-right: 15px;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
</style>
js代码段如下:
<script>
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.οnmοuseοver=function() {clearInterval(MyMar)};
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
</script>
只需要将上述代码复制到一个html页面中,即可实现无缝滚动的效果。