求网页图片滚动代码(要横着的)
- 提问者网友：相思似海深
- 2021-04-25 17:33
- 五星知识达人网友：不想翻身的咸鱼
- 2021-04-25 19:01
<div id=demo >
<table cellPadding=0 align=left border=0 cellspace="0">
<tr>
<td id=demo11 vAlign=top>
<!--这里放图片-->
<a href="链接"><img src="图片"></a>
<a href="链接"><img src="图片"></a>
<a href="链接"><img src="图片"></a>
.....
</td>
<td id=demo12 vAlign=top></td>
</tr>
</table>
</div>
<SCRIPT>
var speed=15
demo12.innerHTML=demo11.innerHTML
function Marquee11(){
if(demo12.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo11.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee11,speed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)}
</SCRIPT>
你试试行不行，希望能帮到你
- 1楼网友：时间的尘埃
- 2021-04-25 20:07
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url] http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> <html xmlns="[url] http://www.w3.org/1999/xhtml[/url]"> <head> <style type="text/css"> body{ font-size:12px; } #MarqueePictues { border:#666666 1px solid ; text-align:center; } #MarqueePictues div{ margin-left:2px; border-left:#CCCCCC 1px dashed; text-align:center; vertical-align:middle; height:100px; line-height:100px; overflow:hidden; width:400px; } img{ height:90px; margin:5px; border:#DDDDDD 1px dashed; } </style> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>横向滚动</title> <script language="javascript"> function init() { var pics = document.getElementById("pictures").childNodes; var length = pics.length; ScrollPic.prototype.flag = 0; for(var i = 0 ; i < length ; i++) { // 兼容FireFox..... if(pics[i].tagName == "TD") { var td = document.createElement("TD"); td.innerHTML = pics[i].innerHTML; document.getElementById("pictures").appendChild(td); } } document.getElementById("pictures").onmouseover = function () { ScrollPic.prototype.flag = 1; } document.getElementById("pictures").onmouseout = function () { if(ScrollPic.prototype.flag = 1) { ScrollPic.prototype.flag = 0; ScrollPic(); } } ScrollPic(); }
function ScrollPic() { var layer = document.getElementById('MarqueePictues').getElementsByTagName("DIV")[0]; if(layer.scrollLeft++ == layer.scrollLeft) { //减去40效验图片滚动时候连接不短。自己慢慢调吧。我也不知道不同情况该减多少了........ layer.scrollLeft = layer.clientWidth/2 - 40; } if(ScrollPic.prototype.flag == 0) { setTimeout("ScrollPic()",10); } } </script> </head>
<body onload="init()"> <div id="MarqueePictues"> <div> <table cellpadding="0" cellspacing="0" border="0"> <tbody> <tr id="pictures"> <td><img src="[img] http://bbs.javascript.com.cn/p_w_picpath/upload/2190.jpg[/img]" /></td> <td><img src="[img] http://bbs.javascript.com.cn/p_w_picpath/face/0.gif[/img]" /></td> <td><img src="[img] http://bbs.javascript.com.cn/p_w_picpath/upload/959.gif[/img]" /></td> <td><img src="[img] http://bbs.javascript.com.cn/p_w_picpath/upload/904.jpg[/img]" /></td> <td><img src="[img] http://bbs.javascript.com.cn/p_w_picpath/face/2.gif[/img]" /></td> </tr> </tbody> </table> </div> </div> </body> </html>