<!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>
<style>
ul,li,img{
list-style:none;
margin:0;
padding:0;
border:none;
}
.con1{
width:960px;
margin:0 auto;
background-color:#fff;
border:1px solid #d6d6d6;
margin-top:1px;
background-color:#999;
}
.conn ul li {
display:inline;
float:left;
font-size:14px;
height:198px;
line-height:3em;
margin:15px 15px 0;
overflow:hidden;
text-align:center;
width:205px;
}
.ini{
display:inline-block;
background-color:#CCC;
}
.demo{
white-space:nowrap;
overflow:hidden;
margin:0 auto;
width:911px;
height:220px;
overflow:hidden;
border:1px solid red;
}
.ini a{
display:block;
}
.conn .list{
margin:0;
}
.conn .list li{
margin:15px 22px 0 0;
}
</style>
</head>
<body>
<div class="con1">
<div class="conn">
<div id="ademo" class="demo">
<div id="ademo1" class="ini">
<ul class="list">
<li><a href="/"><img src="http://www.dshos.com/images/picccc.jpg" width="203" height="156" /></a><a href="/">小儿急性喉炎居家护理</a></li><li><a href="/"><img src="http://www.dshos.com/images/picccc.jpg" width="203" height="156" /></a><a href="/">小儿急性喉炎居家护理</a></li><li><a href="/"><img src="http://www.dshos.com/images/picccc.jpg" width="203" height="156" /></a><a href="/">小儿急性喉炎居家护理</a></li><li><a href="/"><img src="http://www.dshos.com/images/picccc.jpg" width="203" height="156" /></a><a href="/">小儿急性喉炎居家护理</a></li>
</ul>
</div>
<div id="ademo2" class="ini"></div>
</div>
<!--demo__end--->
</div>
<!--conn__end--->
</div>
<!--con1__end--->
<script>
//使用div时,请保证run_box2与 run_box1是在同一行上.
var speed=30 //速度数值越大速度越慢
demo2=document.getElementById("ademo2");
demo1=document.getElementById("ademo1");
demo=document.getElementById("ademo");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0) //offsetWidth 是对象的可见宽度
demo.scrollLeft-=demo1.offsetWidth //scrollWidth 是对象的实际内容的宽,不包边线宽度
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>本来的例子中是在demo中只有img图片,我想改成里面有ul来滚动,结果在IE中不动,,,,求指教啊.
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货