<!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>
<style type="text/css">
body{background: gray;}
#content{width: 1000px;margin: 0 auto;}
#marquee{ overflow:hidden;width:500px;}
#demo{width:1500px; float: left;}
#demo1{ float: left;}
#demo2{ float: left;}
</style>
</head>
<body>
<div id="content">
<div id="marquee">
<div onmouseover="isable=0" onmouseout="isable=1" id="demo">
<div id="demo1">
<img src="images/01.jpg" width="100" height="100"/><img src="images/02.jpg" width="100" height="100"/><img src="images/03.jpg" width="100" height="100"/><img src="images/04.jpg" width="100" height="100"/><img src="images/05.jpg" width="100" height="100"/>
</div>
<div id="demo2">
<img src="images/01.jpg" width="100" height="100"/><img src="images/02.jpg" width="100" height="100"/><img src="images/03.jpg" width="100" height="100"/><img src="images/04.jpg" width="100" height="100"/><img src="images/05.jpg" width="100" height="100"/>
</div>
</div></div>
<script type="text/javascript">
var demo=document.getElementById("demo");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");
var marquee=document.getElementById("marquee");
var result=document.getElementById("result");
var isable=1;
function roll()
{
if(isable)
{
if (marquee.scrollLeft>=demo1.offsetWidth)
{
marquee.scrollLeft-=demo1.offsetWidth;
}
else{
marquee.scrollLeft++;
}
}
}
var mymar= setInterval(function(){
roll();
},50);
</script>
</div>
<hr/>
<div id="result">
</div>
</body>
javascript控制圖片滾動
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
uniapp的那些坑
1.selectedColor不起作用 1.查看位置是否寫對，與lis同級 2.是否爲16進制，selectedColor寫的rgb不支持 3.是否被其他樣式覆蓋，其他地方也設置過sele