图片滚动栏(JS)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  

<title>图片滚动</title>  

</head>  

<body>  

<style type="text/css">

    <!--  

    #demo {  

        background: #FFF;  

        overflow:hidden;  

        border: 1px dashed #CCC;  

        width: 760px;  

    }  

    #demo img {  

        border: 3px solid #F2F2F2;  

    }  

    #indemo {  

        float: left;  

        width: 800%;  

    }  

    #demo1 {  

        float: left;  

    }  

    #demo2 {  

        float: left;  

    }  

    -->

</style>

<div id="demo">  

<div id="indemo">

<div id="demo1">  

<a href="http://op.52pk.com/"><img src="Images/o1.jpg" border="0" height="33px" title="海贼王中文网" style="margin-left:10px;"/></a>  

<a href="http://bbs.opbbs.net/"><img src="Images/o2.jpg"border="0" height="33px" title="熊猫海贼论坛"/></a>  

<a href="http://bbs.fxdm.net/index.php?s=16023b88b969c33b6c9462c5d7022ee1&"><img src="Images/o3.jpg"border="0" height="33px" title="枫雪动漫"/></a>  

<a href="http://bbs.52manyou.com/"><img src="Images/o4.jpg" border="0" height="33px" title="52漫游动漫"/></a> 

<a href="http://tieba.baidu.com/f?kw=%BA%A3%D4%F4%CD%F5"><img src="Images/o5.jpg"border="0" height="33px" title="百度海贼王贴吧"/></a>   

</div>  

<div id="demo2"></div>  

</div>  

</div>  

<script type="text/javascript"><!--  

var speed=10;  

var tab=document.getElementById("demo");  

var tab1=document.getElementById("demo1");  

var tab2=document.getElementById("demo2");  

tab2.innerHTML=tab1.innerHTML;  

function Marquee(){  

    /*  offsetWidth 返回元素的宽度,以像素为单位.  

        scrollLeft 返回已经滚动到元素的左边界或上边界的像素数.  

     */  

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>  

</body>  

</html>  

 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值