求网页中图片循环滚动代码!
1:图片从右向左滚动并且第一张图是从中间出现2:图片滚动到最后一张时与第1张滚动图片首尾相连不出现空白...
1:图片从右向左滚动并且第一张图是从中间出现
2:图片滚动到最后一张时与第1张滚动图片首尾相连不出现空白 展开
2:图片滚动到最后一张时与第1张滚动图片首尾相连不出现空白 展开
3个回答
展开全部
<div id=demo style=overflow:hidden;height:113;width:279>
<div id=demo1>
<table align=left cellpadding=0 cellspace=0 border=0 height="113" cellspacing="3" width="379">
<tr>
<td width="123" align="center">
<a href="http://" target="_blank">
<img border="0" src="1.gif" width="80" height="80">
<br>
第一
</td>
<td width="123" align="center">
<a href="http://" target="_blank">
<img border="0" src="2.gif" width="80" height="80">
<br>
第二
</td>
</tr>
</table>
</div>
<div id=demo2>
</div>
<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)}
</script>
再给一个:
<div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 --> <a href="#">链接一</a>
<br/> <a href="#">链接二</a>
<br/> <a href="#">链接三</a>
<br/> <a href="#">链接四</a>
<br/> <!-- 字幕内容结束 -->
</div>
<!-- 以下是java-script代码 -->
<script language="javascript">
<!--
marqueesHeight=200; //内容区高度
stopscroll=false; //这个变量控制是否停止滚动
with(marquees){
noWrap=true; //这句表内容区不自动换行
style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大
style.height=marqueesHeight;
style.overflowY="hidden"; //滚动条不可见
onmouseover=new Function("stopscroll=true"); //鼠标经过,停止滚动
onmouseout=new Function("stopscroll=false"); //鼠标离开,开始滚动
}
//这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){ //初始化滚动内容
//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} //把"templayer"的内容的“两倍”复制回原内容区:
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//设置连续超时,调用"scrollUp()"函数驱动滚动条:
setInterval("scrollUp()",10);
}
document.body.onload=init;
preTop=0; //这个变量用于判断滚动条是否已经到了尽头
function scrollUp(){ //滚动条的驱动函数
if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动
preTop=marquees.scrollTop; //记录滚动前的滚动条位置
marquees.scrollTop+=1; //滚动条向下移动一个像素
//如果滚动条不动了,则向上滚动到和当前画面一样的位置
//当然不仅如此,同样还要向下滚动一个像素(+1):
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</script>
<div id=demo1>
<table align=left cellpadding=0 cellspace=0 border=0 height="113" cellspacing="3" width="379">
<tr>
<td width="123" align="center">
<a href="http://" target="_blank">
<img border="0" src="1.gif" width="80" height="80">
<br>
第一
</td>
<td width="123" align="center">
<a href="http://" target="_blank">
<img border="0" src="2.gif" width="80" height="80">
<br>
第二
</td>
</tr>
</table>
</div>
<div id=demo2>
</div>
<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)}
</script>
再给一个:
<div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 --> <a href="#">链接一</a>
<br/> <a href="#">链接二</a>
<br/> <a href="#">链接三</a>
<br/> <a href="#">链接四</a>
<br/> <!-- 字幕内容结束 -->
</div>
<!-- 以下是java-script代码 -->
<script language="javascript">
<!--
marqueesHeight=200; //内容区高度
stopscroll=false; //这个变量控制是否停止滚动
with(marquees){
noWrap=true; //这句表内容区不自动换行
style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大
style.height=marqueesHeight;
style.overflowY="hidden"; //滚动条不可见
onmouseover=new Function("stopscroll=true"); //鼠标经过,停止滚动
onmouseout=new Function("stopscroll=false"); //鼠标离开,开始滚动
}
//这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){ //初始化滚动内容
//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} //把"templayer"的内容的“两倍”复制回原内容区:
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//设置连续超时,调用"scrollUp()"函数驱动滚动条:
setInterval("scrollUp()",10);
}
document.body.onload=init;
preTop=0; //这个变量用于判断滚动条是否已经到了尽头
function scrollUp(){ //滚动条的驱动函数
if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动
preTop=marquees.scrollTop; //记录滚动前的滚动条位置
marquees.scrollTop+=1; //滚动条向下移动一个像素
//如果滚动条不动了,则向上滚动到和当前画面一样的位置
//当然不仅如此,同样还要向下滚动一个像素(+1):
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</script>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<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>
<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>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
楼上的好像答非所问啊..
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询