求一段JS图片滚动代码

答案:4 悬赏:0 手机版

解决时间 2021-05-06 03:33

提问者网友：雾里闻花香
2021-05-05 05:55

求一段JS图片滚动代码，要求从右向走滚动，当鼠标放图片上时，就停止滚动，并且放大图片！

最佳答案

五星知识达人网友：执傲
2021-05-05 06:26

下文保存为xx.asp文件

在需要调用的地方写上

以下是代码：

<%
Const New_img=10
set rs_Product=server.createobject("adodb.recordset")
sqltext="select top " & New_img & " * from products order by id desc"
rs_Product.open sqltext,conn,1,1
if not rs_Product.EOF then%><style type="text/css">

</style>
<div align='center' id='demo' >
<table width="135" border='0' align='center' cellpadding='0' cellspace='0'>
<tr>
<td id='demo1' valign='top'>
<table width='100%' cellpadding='0' cellspacing='0' border='0' align='center'>
<tr valign='top'>
<%
while not rs_Product.EOF
fileExt=lcase(right(rs_Product("image"),3))
%>
<td align='center'>
<TABLE width=100% border=0 align=center cellPadding=0 cellSpacing=0>

<TR>
<TD width=8 > </TD>
<TD width="107" align="center">

<a href="products.asp?id=<%=rs_product("id")%>" target="_blank"><img border="0" width="120" height="90" src=<%=rs_Product("image")%> title")%>"></a> </TD>
<TD width=7 vAlign=top> </TD>
</TR>

<TR>
<TD> </TD>
<TD align=center height=20 valign='top'>
<a href='Productshow.asp?ID=<%=rs_Product("ID")%>' target=_blank title='<%=rs_Product("title")%>' class="news"><%=left(rs_Product("title"),8)%></a> </TD>
<TD> </TD>
</TR>
</TABLE>
</td>
<%
rs_Product.MoveNext
wend
%>
</tr>
</table>
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<%if New_img >5 then%>
<script>
var Picspeed=50
demo2.innerHTML=demo1.innerHTML
function Marquee1(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,Picspeed)
demo.onmouseover=function() {clearInterval(MyMar1)}
demo.onmouseout=function() {MyMar1=setInterval(Marquee1,Picspeed)}
</script>
<%end if
else
Response.Write "暂无最新图文"
end if
rs_Product.close
set rs_Product=nothing
%>

全部回答

1楼网友：神鬼未生
2021-05-05 09:34

<div id=demo style="overflow:hidden;width:950px; //width设置整个滚动条宽度

border:2px solid #e0e0e0;padding:2px;" onmouseover="stopscroll();" onmouseout="doscroll()"> <div id="demo1" > <img src="C:\Documents and Settings\Administrator\桌面\web\image\1_调整大小.jpg"> <img src="C:\Documents and Settings\Administrator\桌面\web\image\2_调整大小.jpg"> <img src="C:\Documents and Settings\Administrator\桌面\web\image\3_调整大小.jpg"> <img src="C:\Documents and Settings\Administrator\桌面\web\image\4_调整大小.jpg"> <img src="C:\Documents and Settings\Administrator\桌面\web\image\5_调整大小.jpg"> <img src="C:\Documents and Settings\Administrator\桌面\web\image\6_调整大小.jpg"> <img src="C:\Documents and Settings\Administrator\桌面\web\image\7_调整大小.jpg"> <img src="C:\Documents and Settings\Administrator\桌面\web\image\8_调整大小.jpg"> <img src="C:\Documents and Settings\Administrator\桌面\web\image\9_调整大小.jpg"> <img src="C:\Documents and Settings\Administrator\桌面\web\image\10_调整大小.jpg"> <img src="C:\Documents and Settings\Administrator\桌面\web\image\11_调整大小.jpg"> <img src="C:\Documents and Settings\Administrator\桌面\web\image\12_调整大小.jpg"> </div> <script> var t=demo.scrollWidth demo1.innerHTML+=demo1.innerHTML function doMarquee() { demo.scrollLeft=demo.scrollLeft<demo.scrollWidth-demo.offsetWidth?demo.scrollLeft+1:t-demo.offsetWidth } function doscroll() { sc=setInterval(doMarquee,20) } function stopscroll() { clearInterval(sc) } doscroll() </script>

-------放在 BODY 里

2楼网友：由着我着迷
2021-05-05 08:57

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <body> <div id=demo style=overflow:hidden;height:200;width:500;background:#214984;color:#ffffff> <table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top>  <img src="pic/1.jpg" onmouseover="show(this);" onmouseout="hid(this);" width="156" height="200" /> <img src="pic/2.jpg" onmouseover="show(this);" onmouseout="hid(this);" width="160" height="198" /> <img onmouseover="show(this);" onmouseout="hid(this);" src="pic/3.jpg" width="155" height="200" /> <img onmouseover="show(this);" onmouseout="hid(this);" src="pic/4.jpg" width="157" height="200" /> </td><td id=demo2 valign=top></td></tr></table></div> <img id="da" /> <script> var speed=30 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidth else{ demo.scrollLeft++ } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar); } demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} function show(obj){ document.getElementById("da").style.display="block"; document.getElementById("da").src=obj.src; } function hid(obj){ document.getElementById("da").style.display="none"; } </script>

</body> </html>

3楼网友：往事隔山水
2021-05-05 07:50

图片自己更换

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！