图片首尾相接左右循环滚动代码
我的网站最下方就用这种特效,楼主请到我空间里看这篇文章
《网页设计中实现首尾相接循环滚动效果》/wibmj/blog/item/618fc5c4d1b2e2ae8326acf2.html
不懂再给我留言。
也可以到我的网站上看看网页最下方的滚动效果(可惜用的是免费ASP空间,被空间供应商强加一个广告条影响了界面美观程度…………正在改进中)
下面我给出一个结合marquee和JavaScript来实现首尾相接循环走动效果代码及其实现方法:
1.首先你要先建一个文件夹,比如名为“gundong”的文件夹,再建两个名为“js”和“images”的子文件夹。
2.用记事本将下面的js代码复制进去,保存在js子文件夹下;文件名为scrollpic.js
var speed3=25//速度数值越大速度越慢
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)}
3.用记事本将下面的html代码复制进去,保存在gundong根文件夹下,文件名为index.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>/wibmj</title>
<style type="text/css">
td {font-size: 12px;}
</style>
</head>
<body>
<CENTER>
<TABLE style="BORDER: c 1px solid;" cellSpacing=0 cellPadding=0 width=750 align=center border=0>
<TBODY>
<TR>
<TD>
<DIV id=demo style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff">
<TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0">
<TBODY>
<TR>
<TD id=demo1 ><table width="1710" height="116" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="171" background="images/pic_bg.jpg"><div align="center">1</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">
<p>2</p>
</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">3</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">4</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">5</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">6</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">7</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">8</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">9</div></td>
<td width="171" background="images/pic_bg.jpg"><div align="center">10</div></td>
</tr>
</table></TD>
<TD id=demo2 >?</TD></TR></TBODY></TABLE></DIV>
<script language=JavaScript src="js/scrollpic.js"></script>
</TD></TR></TBODY></TABLE></TD></TR></TABLE>
</CENTER>
</BODY></HTML>
4.在images文件夹中法如一张名为pic_bg.jpg的图片.
注意上面文件的文件名和后缀要保存正确,不要改动,如果改动了,就要修改代码里的路径才能正确显示的,其实也不难。
html图片变换和图片连续滚动代码
主要是marquee这个标签能实现你想要的效果,或是直接写js也可以的
这是我用marquee做的个试例 没有用到js
<marquee direction="right"onmouseout="this.start()" onmouseover="()">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Img/8.bmp" />
<asp:Image ID="Image2" runat="server" ImageUrl="~/Img/5.bmp" />
<asp:Image ID="Image3" runat="server" ImageUrl="~/Img/4.bmp" />
<asp:Image ID="Image4" runat="server" ImageUrl="~/Img/3.bmp" />
<asp:Image ID="Image5" runat="server" ImageUrl="~/Img/2.bmp" />
<asp:Image ID="Image6" runat="server" ImageUrl="~/Img/1.bmp" /></marquee>
求一个图片循环向上滚动代码
先给你段代码吧
不间断滚动代码向上 <div id=demo_t0 style=overflow:hidden;height:340px onmouseover="demo_ti=1" onmouseout="demo_ti=0">
<div id=demo_t1>
内容
</div>
<div id=demo_t2></div>
<script>
var demo_ti=0;
demo_t2.innerHTML=demo_t1.innerHTML
function demo_Marquee(){
if (demo_ti==1)return
if(demo_t2.offsetTop-demo_t0.scrollTop<=0)
demo_t0.scrollTop-=demo_t1.offsetHeight
else
demo_t0.scrollTop++
}
setInterval(demo_Marquee,50)
</script>
</div>
这个代码用 肯定是能用
但是要将上面的代码中的 “内容”替换成图片的的路径代码 这个也是要您自己会上传图片才可以的
当然图片的尺寸都要一致
图片的连接也是要你点击图片做超级链接的 比较复杂 您要是对代码熟悉的话就好做了
求多张图片循环往左滚动代码
最简单的方法就是使用<marquee>标记。
然后在其中加入事件onmouseover= onmouseout=this.play好像是。
求图片循环滚动代码~``先谢了
图片的: