网页图片左右循环滚动代码
发布网友
共2个回答
热心网友
<table width=514 border=0 align="center" cellpadding=0 cellspacing=0>
<tr>
<td> <div id=demo style="OVERFLOW: hidden;z-index: 3px; WIDTH: 514px">
<table align=left border=0>
<tr>
<td id=demo1> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="center" valign="middle">
<%
dim n1
n1=0
%>
<%while not rs.eof and n1<999
if rs("picurl")<>"" then
n1=n1+1
%>
<td><table border=0 align=center cellpadding=0 cellspacing=0><tr><td><table border=0 align=center cellpadding=2 cellspacing=2 bgcolor='#ffffff' style="border: 0px double #FFFFFF"><tr><td><table border=0 align=center cellpadding=3 cellspacing=2 bgcolor='#ffffff' style="border: 1px double #666666">
<tr>
<td align="center" valign="middle"><a href="shownews.asp?id=<%=rs("newsid")%>" target="_blank" title="<%=rs("title")%>"><img src='../jindian/<%=rs("picurl")%>' alt='点击查看详细' height="111" border="0"></a></td>
</tr>
</table></td></tr></table></td></tr><tr><td align="center"><% if len(rs("title"))>11 then %><%=mid(rs("title"),1,11)%>...<%else %><%=rs("title")%><%end if%></td></tr></table></td>
<td width=4></td>
<% end if
rs.movenext
wend
n1=0
rs.movefirst
%>
<%
while not rs.eof and n1<999
if rs("picurl")<>"" then
n1=n1+1
%>
<% end if
rs.movenext
wend
%>
</tr>
</table></td>
<td id=demo2 valign=top> </td>
</tr>
</table>
</div>
<script>
var speed3=20//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
</script> </td>
</tr>
</table>
热心网友
<style type="text/css">
<!--
#demo { overflow:hidden;
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 940px;
}
#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">
<img src="images/teams/rehuo.jpg"/>
<img src="images/teams/huren.jpg"/>
<img src="images/teams/huojian.jpg"/>
<img src="images/teams/maci.jpg"/>
<img src="images/teams/kaierteren.jpg"/>
<img src="images/teams/jueshi.jpg"/>
<img src="images/teams/lanwang.jpg"/>
<img src="images/teams/sll.jpg"/></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>
这段代码是从左向右无缝滚动代码，你直接放到放滚动图片的地方就行，记得设置下图片的宽高，还有就是上面css里面设置下整个图片滚动区域的宽度
