网页设计 图片滚动代码
悬赏分：20|
<div id=demo style="width:200px; overflow:200px;hidden:200px;">
<table width="**" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id=demo1>
<table width="**" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="16%" valign="top"><img src="123.jpg" width="256" height="265" border="0" /></td>
<td width="16%" valign="top"><img src="u=2071069162,3140365922&fm=59.jpg" width="256" height="265" border="0" /></td>
<td width="16%" valign="top"><img src="114.jpg" width="301" height="267" border="0" /></td>
<td width="16%" valign="top"><img src="u=1591479215,543162922&fm=23&gp=0.jpg" width="256" height="265" border="0" /></td>
<td width="16%" valign="top"><img src="u=1160761241,3158904811&fm=21&gp=0.jpg" width="256" height="265" border="0" /></td>
<td width="14%" valign="top"> </td>
</tr>
</table>
</td>
<td id=demo2><p> </p></td>
</tr>
</table>
</div>
<script>
var speed=20;
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
function Marquee(){
if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
else{
document.getElementById("demo").scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed)
document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)}
document.getElementById("demo").onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
为神魔我把这个代码弄上之后，图片不滚动。。~~~~(>_<)~~~~
<table width="**" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id=demo1>
<table width="**" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="16%" valign="top"><img src="123.jpg" width="256" height="265" border="0" /></td>
<td width="16%" valign="top"><img src="u=2071069162,3140365922&fm=59.jpg" width="256" height="265" border="0" /></td>
<td width="16%" valign="top"><img src="114.jpg" width="301" height="267" border="0" /></td>
<td width="16%" valign="top"><img src="u=1591479215,543162922&fm=23&gp=0.jpg" width="256" height="265" border="0" /></td>
<td width="16%" valign="top"><img src="u=1160761241,3158904811&fm=21&gp=0.jpg" width="256" height="265" border="0" /></td>
<td width="14%" valign="top"> </td>
</tr>
</table>
</td>
<td id=demo2><p> </p></td>
</tr>
</table>
</div>
<script>
var speed=20;
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
function Marquee(){
if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
else{
document.getElementById("demo").scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed)
document.getElementById("demo").onmouseover=function() {clearInterval(MyMar)}
document.getElementById("demo").onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
为神魔我把这个代码弄上之后，图片不滚动。。~~~~(>_<)~~~~
<body>
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#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="#"><img src="images/01.jpg" border="0" /></a>
<a href="#"><img src="images/01.jpg" border="0" /></a>
<a href="#"><img src="images/01.jpg" border="0" /></a>
<a href="#"><img src="images/01.jpg" border="0" /></a>
<a href="#"><img src="images/01.jpg" border="0" /></a>
<a href="#"><img src="images/01.jpg" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
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>
如能解惑 还请采纳 谢谢！！
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#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="#"><img src="images/01.jpg" border="0" /></a>
<a href="#"><img src="images/01.jpg" border="0" /></a>
<a href="#"><img src="images/01.jpg" border="0" /></a>
<a href="#"><img src="images/01.jpg" border="0" /></a>
<a href="#"><img src="images/01.jpg" border="0" /></a>
<a href="#"><img src="images/01.jpg" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
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>
如能解惑 还请采纳 谢谢！！
好
不好其 他 回 答共3条
1楼
jquery吧 简单点
2楼
这是啥玩意儿?用JS
我来回答这个问题
立即登陆回答获取会员积分，提高用户级别