码迷,mamicode.com
首页 > 其他好文 > 详细

图片无缝滚动

时间:2015-10-21 17:12:53      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:

<style>
#demo 
{
    overflow:hidden;
    border: 1px dashed #d8edff;
    width: 900px;
    height:132px;
}
#demo img {
border: 2px solid #d8edff;
}
#demo1 a
{
    float:left;
    margin:10px;
    cursor:default;
}
#demo2 a
{
    float:left;
    margin:10px;
}
#indemo {
width: 800%;
}
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="img/hydra_index_pic1.png" border="0" /></a>
<a href="#"><img src="img/hydra_index_pic2.png" border="0" /></a>
<a href="#"><img src="img/hydra_index_pic3.png" border="0" /></a>
<a href="#"><img src="img/hydra_index_pic4.png" border="0" /></a>
<a href="#"><img src="img/hydra_index_pic5.png" border="0" /></a>
<a href="#"><img src="img/hydra_index_pic6.png" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
</div>
<script>
//使用div时,请保证demo2与demo1是在同一行上.
var speed=30//速度数值越大速度越慢
var tab2=document.getElementById("demo2");
var tab1=document.getElementById("demo1");
var tab=document.getElementById("demo");
tab2.innerHTML=tab1.innerHTML
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)//offsetWidth 是对象的可见宽度
tab.scrollLeft-=tab1.offsetWidth//scrollWidth 是对象的实际内容的宽,不包边线宽度
else{
tab.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
tab.onmouseover=function() {clearInterval(MyMar)}
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

今天发现我写的图片滚动代码有问题,图片虽然能循环滚动,但不是连续的,上网查了才发现是因为demo1和demo2都使用了浮动,使它们不在同一行上。取消浮动后,图片播放第二遍时显示不在同一行上,解决方法

#demo2 a
{
    float:left;
    margin:10px;
}

图片无缝滚动

标签:

原文地址:http://www.cnblogs.com/hyql/p/4898153.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!