一个网页图片连续滚动的问题
解决时间 2021-07-25 05:13
- 提问者网友：我一贱你就笑
- 2021-07-24 20:11
我在网页上做了图片循环的功能，刚打开网页是这样的（如下图）
图片只有6张，循环完了之后是这样的（如下图）
怎样让它不断的循环，不出现空白，图片循环的代码如下：
<marquee direction='left' onmouseover='stop()'onmouseout='start()' width=978>
<img src="images/index_38.jpg" width="154" height="106" /><img src="images/index_39.jpg" width="154" height="106" /><img src="images/index_40.jpg" width="154" height="106" /><img src="images/index_41.jpg" width="154" height="106" /><img src="images/index_42.jpg" width="154" height="106" /><img src="images/index_43.jpg" width="154" height="106" />
</div> <div id=demo2></div> </div> <script language="javascript"> var speed=30 demo2.innerHTML=demo1.innerHTML demo.scrollTop=demo.scrollHeight function Marquee(){ if(demo1.offsetTop-demo.scrollTop>=0) demo.scrollTop+=demo2.offsetHeight else{ demo.scrollTop-- } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script>
</marquee>
应该如何修改？谢谢！
最佳答案
- 五星知识达人网友：毛毛
- 2021-07-24 20:38
“ http://as661118401.241.cnnicidc.com/1/web/tx/下载特效代码/图片无空白滚动.html”
看看上面的连接，我搜集的，应该是你想要的
全部回答
- 1楼网友：一叶十三刺
- 2021-07-24 21:30
<marquee direction='left' onmouseover='stop()'onmouseout='start()' width=978>
<img src="images/index_38.jpg" width="154" height="106" /><img src="images/index_39.jpg" width="154" height="106" /><img src="images/index_40.jpg" width="154" height="106" /><img src="images/index_41.jpg" width="154" height="106" /><img src="images/index_42.jpg" width="154" height="106" /><img src="images/index_43.jpg" width="154" height="106" />
</div> <div id=demo2></div> </div> <script language="javascript"> var speed=30 demo2.innerHTML=demo1.innerHTML demo.scrollTop=demo.scrollHeight function Marquee(){ if(demo1.offsetTop-demo.scrollTop>=0) demo.scrollTop+=demo2.offsetHeight else{ demo.scrollTop-- } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script>
</marquee>
- 2楼网友：痴妹与他
- 2021-07-24 21:02
<!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>
<title></title>
<style type="text/css">
<!--
TD {FONT-SIZE: 12px;}
</style>
</head>
<body>
<div id=demo >
<table cellspacing="0" cellpadding="0" align="center"
border="0">
<tbody>
<tr>
<td id="marquePic1" valign="top">
<table width="958" height="130" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="95" height="110" align="center"><img src="" /></td>
<td width="95" align="center"><img src="" /></td>
<td width="95" align="center"><img src="" /></td>
<td width="95" align="center"><img src="" /></td>
<td width="95" align="center"><img src="" /></td>
<td width="95" align="center"><img src="" /></td>
<td width="95" align="center"><img src="" /></td>
<td width="95" align="center"><img src="" /></td>
<td width="95" align="center"><img src="" /></td>
<td width="103" align="center"><img src="" /></td>
</tr>
</table>
</td>
<td id="marquePic2" valign="top"></td>
</tr>
</tbody>
</table>
</div>
<script type=text/javascript>
var speed=30
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0
}else{
demo.scrollLeft++
}}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>
我要举报
大家都在看
推荐资讯