您的位置：首页 > Web前端 > JavaScript

javascript控制图片滚动

2011-09-27 00:26 375 查看

<!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 float function xhtml html

相关文章推荐

新的分享

章节导航