图片滚动栏(JS)

来源:互联网 发布:linux ifup eth0 编辑:程序博客网 时间:2024/06/01 10:16

<!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.onmouseover=function() {clearInterval(MyMar)};  

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};  

// 

-->

</script>  

</body>  

</html>  

 
原创粉丝点击