图片循环滚动效果
有很多文章中都涉及到了图片循环滚动(从右到左,或下到上)
我在这里想问一下:图片从上到下,图片从左到右的图片循环滚动.怎么实现呀!
谢谢大家了!!!!!!
问题点数：100、回复次数：16Top
1 楼lgnet（www.51bw.net）回复于 2005-05-31 14:59:07 得分 1
使用javascript是可以实现的！Top
2 楼lgnet（www.51bw.net）回复于 2005-05-31 15:00:46 得分 1
使用javascript是可以实现的！
打开一个具有这样效果的网页，然后查看其源代码，这样就可以仿效其效果了！Top
3 楼WTaoboy（SnowMans）回复于 2005-05-31 15:05:12 得分 1
javascript
http://www.baron.com.cn/javascript/index5.aspTop
4 楼yezie（椰子)(.Net）回复于 2005-05-31 15:06:58 得分 10
连续滚动的图片，一般都是用Flash制作，现在我们使用Script制作同样的效果：
制作方法（请自己找好相关图片）：
在页面<body>~</body>相关位置加入代码：
<iframe frameborder=no height=100 marginheight=0 marginwidth=0 name=mq scrolling=no src="scrollimg-pic.htm" width="100%"></iframe>
<iframe frameborder=no height=0 marginheight=0 marginwidth=0 name=mq scrolling=no src="make-scroll.htm" width=0></iframe>
新建scrollimg-pic.htm页面，插入相同大小的图片若干张。为使它不停顿地连续播放，请在同一行中，连续插入图片二至三次。类似于 scrollimg-pic.htm 文件。
在每一张的图片上，添加特效：
停顿效果代码：onmouseout=javascript:parent.frames[1].startscroll();
onmouseover=javascript:parent.frames[1].stopscroll()"
手形效果：style="cursor:hand
都添加至<img src="XXX.jpg">。
也可以加入图片的超级链接！
再新建make-scroll.htm页面文件，该文件为控制图片滚动的页面。在<head>~</head>中，加入代码：
<SCRIPT language=JavaScript>
<!--//
var x = 0;
var y = 0;
var limdex = 600;
var dest = 0;
var distance = 0;
var step = 0;
var destination = 0;
var on = true;
function scrollit(destination) {
step = 2;
dest = destination;
if (x<dest & x < limdex){
while (x<dest) {
step += (step / 7);
x += step;
parent.frames[0].scroll(x,0);
}
// top.main.scroll(dest,0);
if(dest <=limdex) { parent.frames[0].scroll(dest,0); }
x = dest;
}
if (x > dest) {
while (x>dest) {
step += (step / 7);
if(x >= (0+step)) { x -= step; parent.frames[0].scroll(x,0); }
else break;
}
if(dest >= 0) { parent.frames[0].scroll(dest,0); }
x = dest;
}
if (x<1) { parent.frames[0].scroll(1,0); x=1 }
if (x>limdex) { parent.frames[0].scroll(limdex,0); x=limdex }
x = dest;
}
function scrollnow() {
if (on){
if (x < limdex & x >= 0 ) {
parent.frames[0].scroll(x,0);
x = x + 1;
setTimeout('scrollnow()', 8);
}
else if (x < 0) {
x = limdex;
scrollnow();
}
else {
x=0;
scrollnow();
}
}
}
// *********************************
// 去掉原来的stopscroll()
function stopscroll() {
if (on){
on = false;
}
else {
on = true;
scrollnow();
}
}
function startscroll() { on = true; scrollnow(); }
function stop_start() {
if (on){ on = false;}else { on = true;scrollnow();}
}
scrollnow();
//***********************************
//-->
</SCRIPT>
注意，代码中：var limdex=600; 数字的取值计算为：单张图片的宽度像素 * 使用图片张数
以我们的滚动效果来计算，使用的单张图片宽度为120px，共使用５张，所以var limdex的数字值为６００。
连续滚动的图片的特效就制作完成了！Top
5 楼coley（唉～眼镜又厚了～）回复于 2005-05-31 15:09:19 得分 10
->
<marquee align="middle" direction="right" bgcolor="#cceeff" behavior="scroll" loop="7" width="150%" scrollamount="10" scrolldelay="500">跑马灯</marquee>：这里的"align"为设定跑马灯的对齐方式,有top、middle和bottom,"direction"为设定跑马灯的方向,"bgcolor"为设定跑马灯行列的背景顏色,"behavior"为设定跑马灯的方式,分別有scroll、slide和alternate,"loop"为设定跑马灯走的次数,"width"为跑马灯行列的长度,"scrollamount"为跑马灯的速度,"scrolldelay"为跑马灯延迟的时间。
---------------------------------------------------------------------------------
1 说明 如果要实现图片滚动效果,直接连接多个 <img>图片间分隔采用空格符号分割
<marquee
aligh=left|center|right|top|bottom
bgcolor=#n
direction=left|right|up|down
behavior=type
height＝n
hspace＝n
scrollamount=n
Scrolldelay=n
width=n
VSpace=n
loop＝n>
可以看出由于活动字幕的显示方式多种多样，可选的参数也很多。下面解释一下各参数的含义：
align：是设定活动字幕的位置，不过除了居左、居中、居右三种位置外，又增加靠上（align=top）和靠下（align=bottom）两种位置。
Bgcolor：用于设定活动字幕的背景颜色，一般是十六进制数。
Direction：用于设定活动字幕的滚动方向是向左、向右、向上、向下。
Behavior：用于设定滚动的方式，主要由三种方式：behavior="scroll"表示由一端滚动到另一端；behavior="slide":表示由一端快速滑动到另一端，且不再重复； behavior="alternate"表示在两端之间来回滚动。
Height：用于设定滚动字幕的高度。
Width：则设定滚动字幕的宽度。
Hspace和vspace：分别用于设定滚动字幕的左右边框和上下边框的宽度。
Scrollamount：用于设定活动字幕的滚动距离。
scrolldelay：用于设定滚动两次之间的延迟时间。
Loop：用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新。
<marquee>标记的默认情况是向左滚动无限次，字幕高度是文本高度，滚动范围：水平滚动的宽度是当前位置的宽度；垂直滚动的高度是当前位置的高度。
应用技巧
1、全取默认值，所用代码最少，请看下面的例子
这个滚动字幕全取默认值，源代码：<marquee>这里写字幕内容</marquee>，代码是不是很少？
2、垂直滚动
只要加上diriction="up"就行了，如<marquee direction="up" >这里写字幕内容</marquee>。
3、多行文本的活动字幕
由于<mqrquee>标记只能作用于一段文本，因此多行活动字幕，分行时只能用<br>标记，不能用<p>标记。
示例源代码：
<marquee>
活动字幕内容第一行<br>
活动字幕内容第二行<br>
活动字幕内容第三行<br>
</marquee>
4、在字幕内容中加入图象
<marquee>虽是一个活动字幕标记，但它允许在其中加入图象。下面是一个加入了图片的代码： <marquee><img src="image/a2ball.gif" width="17" height="16">这是加入图象的活动字幕</marquee>
5、在Dreamweaver中使用<marquee>标记
Dreamweaver不能在编辑窗中直接加入marquee标记，但可在源代码检视器中加入<marquee>标记，然后在编辑窗中编辑活动字幕的内容即可。
<marquee>标记的参数较多，在应用中要把握一个原则，能用默认值就不要再设置参数值，用什么参数就设置该参数的值，其它参数就不要再设置，以把代码控制在最少的范围内
Top
6 楼net_lover（【孟子E章】）回复于 2005-05-31 15:11:01 得分 1
最简单的
<marquee><img src=,....></marquee>Top
7 楼baobei7758（陵少）回复于 2005-05-31 15:12:12 得分 1
图片循环滚动完美解决
http://www.netbei.com/Article/art/art5/200409/2592.htmlTop
8 楼cuike519（I will be back!）回复于 2005-05-31 15:13:32 得分 1
<MARQUEE onmouseover='stop()' onmouseout='start()' scrollAmount='1' scrollDelay='60' direction='up' width='100%' height='100' align='top'>
<img src ="44.bmp">
</marquee>
Top
9 楼meixiaofeng（yesmsn）回复于 2005-05-31 15:20:04 得分 1
jsTop
10 楼yaohangnet（天地同归）回复于 2005-05-31 15:26:54 得分 0
<script language="JavaScript">
<!--
var Marquee1 = "A_101128cb798";
var Marquee2 = "BA_101128cb798";
var Container = "CA_101128cb798";
var MarqueeSpeed = 10;
//-->
</script>
<div align="center" style="overflow:hidden;width:100" id="CA_101128cb798">
<table border="0" align="center" cellpadding="0" cellspacing="0" cellspace="0">
<tr>
<td valign="top" id="A_101128cb798">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td>
<a target="_blank" href="xxfc/tp/实验小学教学楼.JPG">
<img border="0" height="99" hspace="2" alt="实验小学教学楼" src="xxfc/tp/实验小学教学楼.JPG" />
</a>
</td>
<td>
<a target="_blank" href="xxfc/tp/实验小学俯瞰图.JPG">
<img border="0" height="99" hspace="2" alt="实验小学俯瞰图" src="xxfc/tp/实验小学俯瞰图.JPG" />
</a>
</td>
<td>
<a target="_blank" href="xxfc/tp/xx6_small.jpg">
<img border="0" height="99" hspace="2" alt="中学综合楼" src="xxfc/tp/xx6_small.jpg" />
</a>
</td>
<td>
<a target="_blank" href="xxfc/tp/dy9_small.jpg">
<img border="0" height="99" hspace="2" alt="中学食堂" src="xxfc/tp/dy9_small.jpg" />
</a>
</td>
<td>
<a target="_blank" href="xxfc/tp/1_small.jpg">
<img border="0" height="99" hspace="2" alt="中学校园风光" src="xxfc/tp/1_small.jpg" />
</a>
</td>
<td>
<a target="_blank" href="xxfc/tp/12_small.jpg">
<img border="0" height="99" hspace="2" alt="中学校园风光" src="xxfc/tp/12_small.jpg" />
</a>
</td>
<td>
<a target="_blank" href="xxfc/tp/13_small.jpg">
<img border="0" height="99" hspace="2" alt="中学校园风光" src="xxfc/tp/13_small.jpg" />
</a>
</td>
<td>
<a target="_blank" href="xxfc/tp/14_small.jpg">
<img border="0" height="99" hspace="2" alt="中学校园风光" src="xxfc/tp/14_small.jpg" />
</a>
</td>
<td>
<a target="_blank" href="xxfc/tp/2xyjs.jpg">
<img border="0" height="99" hspace="2" alt="华盛虹溪中学校园" src="xxfc/tp/2xyjs.jpg" />
</a>
</td>
<td>
<a target="_blank" href="xxfc/tp/2dnk.jpg">
<img border="0" height="99" hspace="2" alt="一中电脑课" src="xxfc/tp/2dnk.jpg" />
</a>
</td>
</tr>
</table>
</td>
<td id="BA_101128cb798">amxh@21cn.com</td>
</tr>
</table>
</div>
<script language="JavaScript">
<!--
//以下不要修改
document.getElementById(Marquee2).innerHTML=document.getElementById(Marquee1).innerHTML
function Marquee(){
if(document.getElementById(Container).scrollLeft>=document.getElementById(Marquee1).scrollWidth)
document.getElementById(Container).scrollLeft=0
else
document.getElementById(Container).scrollLeft++
}
var DA_101128cb798 = window.setInterval(Marquee,MarqueeSpeed)
document.getElementById(Container).onmouseover=function() {window.clearInterval(DA_101128cb798)}
document.getElementById(Container).onmouseout=function() {DA_101128cb798 = window.setInterval(Marquee,MarqueeSpeed)}
-->
</script>
这段 实现图片从右到左 怎样做能实现图片从左到右滚动
再次 谢谢大家!!!!!!Top
11 楼net_lover（【孟子E章】）回复于 2005-05-31 15:45:49 得分 10
<div id="newsBlock">
<div id="subBlock">
<div style="padding:3px; padding-left: 10px; border-bottom: 1px solid #239CED;">
<img src="http://dotnet.aspx.cc/Images/banner.gif">
</div>
<div style="padding:3px; padding-left: 10px; border-bottom: 1px solid #239CED;">
<img src="http://dotnet.aspx.cc/Images/logoSite.gif">
</div>
<div style="padding:3px; padding-left: 10px; border-bottom: 1px solid #239CED;">
<img src="http://dotnet.aspx.cc/Images/banner.gif">
</div>
<div style="padding:3px; padding-left: 10px; border-bottom: 1px solid #239CED;">
<img src="http://dotnet.aspx.cc/Images/logoSite.gif">
</div>
<div style="padding:3px; padding-left: 10px; border-bottom: 1px solid #239CED;">
<img src="http://dotnet.aspx.cc/Images/banner.gif">
</div>
</div>
</div>
</div>
<script>
var block = document.all["newsBlock"]
block.insertAdjacentHTML("beforeEnd" , block.children[0].outerHTML)
block.runtimeStyle.overflow = "hidden"
setInterval(function()
{
block.scrollTop++
block.runtimeStyle.height = block.children[0].offsetHeight
if ((block.scrollTop + block.children[0].offsetHeight) == block.scrollHeight) block.scrollTop = 1
},20)
</script>Top
12 楼net_lover（【孟子E章】）回复于 2005-05-31 15:58:00 得分 10
也可以参考
<table width="750" align="center" bgcolor="#E6E6E6">
<tr>
<td><SCRIPT LANGUAGE="JavaScript">
var dde_para = new Array();
var dde_aa = new Array();
var dde_url = document.location.href;
var dde_pp = dde_url.split("#")[1];
var jspfile = 1;
var para = null;
//滚动页面的宽
var scrollwidth = 740;
//滚动页面的高
var scrollheight = 175;
if(dde_pp!=null && dde_pp.length>0){
dde_para = dde_pp.split("&");}
for(i=0; dde_para!=null && i<dde_para.length;i++){
dde_aa = dde_para[i].split("=");
eval("var "+dde_aa[0] +"='"+dde_aa[1]+"'");}
var car_num = 5;
var i=1;
//默认滚动时间10秒
var pausebetweenimages=1000 * 8;
var slideimages=new Array();
//滚动页面1的URL
slideimages[0]="<iframe border=0 vspace=0 hspace=0 bgcolor=#888888 Name=union163com align=center marginwidth=0 marginheight=0 framespacing=0 frameborder=0 scrolling=no width="+scrollwidth+" height="+scrollheight+" src='http://ent.qq.com//entpic/rlhfejzd.htm'></iframe>";
//滚动页面2的URL
slideimages[1]="<iframe border=0 vspace=0 hspace=0 bgcolor=#888888 Name=union163com align=center marginwidth=0 marginheight=0 framespacing=0 frameborder=0 scrolling=no width="+scrollwidth+" height="+scrollheight+" src='http://ent.qq.com//entpic/rlhfejzd2.htm'></iframe>";
function move1(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=car_num){
tdiv.style.pixelTop=0
setTimeout("move1(tdiv)",pausebetweenimages)
setTimeout("move2(second2)",pausebetweenimages)
return}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=car_num
setTimeout("move1(tdiv)",50)}
else{
tdiv.style.pixelTop=scrollheight
tdiv.innerHTML=slideimages[0]
if (i==slideimages.length-1)
i=0
else i++}}
function move2(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=car_num){
tdiv2.style.pixelTop=0
setTimeout("move2(tdiv2)",pausebetweenimages)
setTimeout("move1(first2)",pausebetweenimages)
return}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=car_num
setTimeout("move2(second2)",50)}
else{
tdiv2.style.pixelTop=scrollheight
tdiv2.innerHTML=slideimages[1]
if (i==slideimages.length-1)
i=0
else i++}}
function conmouse(){car_num=0;}
function cmouseout(){car_num=5;}
function startscroll(){
if (document.all){
move1(first2)
second2.style.top=scrollheight
}
else if (document.layers){
move1(document.main.document.first)
document.main.document.second.top=scrollheight+5
document.main.document.second.visibility='show'}}
//-->
</script> <ilayer id="main" width="&{scrollwidth};" height="&{scrollheight};" bgcolor="#ffffff">
<layer id="first" left="0" top="1" width="&{scrollwidth};"> <script
language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script> </layer> <layer id="second" left="0" top="0" width="&{scrollwidth};" visibility="hide">
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[1])
</script> </layer> </ilayer> </p>
<p><script language="JavaScript1.2">
if (document.all){
document.writeln('<span id="main2" style="position:relative;width:'+scrollwidth+';height:'+scrollheight+';overflow:hiden;background-color:#ffffff">')
document.writeln('<div onMouseOver="conmouse()" onMouseOut="cmouseout()" style="position:absolute;width:'+scrollwidth+';height:'+scrollheight+';clip:rect(0 '+scrollwidth+' '+scrollheight+' 0);left:0;top:0">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollwidth+';left:0;top:1;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollwidth+';left:0;top:0">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')}
startscroll();
</SCRIPT></td>
</tr>
</table>Top
13 楼yaohangnet（天地同归）回复于 2005-05-31 17:17:36 得分 0
有人能实现图片从左到右滚动
从上到下滚动
（图片有首尾相接呀（连续，不能出现空白现象））
？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？Top
14 楼yaojiabinnet（砸锅卖铁）回复于 2005-06-01 10:16:34 得分 53
<script language="JavaScript">
<!--
var Marquee1 = "A_101128cb798";
var Marquee2 = "BA_101128cb798";
var Container = "CA_101128cb798";
var MarqueeSpeed = 10;
//-->
</script>
<TABLE id="Table3" cellSpacing="1" cellPadding="1" border="0">
<TR>
<TD>
<div align="center" style="OVERFLOW:hidden;WIDTH:61px;HEIGHT:340px" id="CA_101128cb798">
<table border="0" align="center" cellpadding="0" cellspacing="0" cellspace="0" ID="Table1"
height="100%">
<tr>
<td valign="top" id="A_101128cb798">
<table height="100%" border="0" cellspacing="0" cellpadding="0" ID="Table2">
<tr align="center">
<td>
<a target="_blank" href="xxfc/tp/2dnk.jpg"><img border="0" width="60" vspace="0" alt="一中电脑课1" src="xxfc/tp/2dnk.jpg">
</a>
</td>
</tr>
<tr align="center">
<td>
<a target="_blank" href="xxfc/tp/2dnk.jpg"><img border="0" width="60" vspace="0" alt="一中电脑课2" src="xxfc/tp/2dnk.jpg">
</a>
</td>
</tr>
<tr align="center">
<td>
<a target="_blank" href="xxfc/tp/2dnk.jpg"><img border="0" width="60" vspace="0" alt="一中电脑课3" src="xxfc/tp/2dnk.jpg">
</a>
</td>
</tr>
<tr align="center">
<td>
<a target="_blank" href="xxfc/tp/2dnk.jpg"><img border="0" width="60" vspace="0" alt="一中电脑课4" src="xxfc/tp/2dnk.jpg">
</a>
</td>
</tr>
<tr align="center">
<td>
<a target="_blank" href="xxfc/tp/2dnk.jpg"><img border="0" width="60" vspace="0" alt="一中电脑课5" src="xxfc/tp/2dnk.jpg">
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="BA_101128cb798">YY@Tom.com</td>
</tr>
</table>
</div>
</TD>
</TR>
</TABLE>
<script language="JavaScript">
<!--
//以下不要修改
document.getElementById(Marquee2).innerHTML=document.getElementById(Marquee1).innerHTML
function Marquee(){
if(document.getElementById(Container).scrollTop>=document.getElementById(Marquee1).scrollHeight)
document.getElementById(Container).scrollTop=0
else
document.getElementById(Container).scrollTop++
}
var DA_101128cb798 = window.setInterval(Marquee,MarqueeSpeed)
document.getElementById(Container).onmouseover=function() {window.clearInterval(DA_101128cb798)}
document.getElementById(Container).onmouseout=function() {DA_101128cb798 = window.setInterval(Marquee,MarqueeSpeed)}
-->
</script>
Top
15 楼yaohangnet（天地同归）回复于 2005-06-01 14:59:23 得分 0
没有实现我的要求
下次再来！！！！！！！！！！！！！！ 谢谢各位Top
16 楼tjj36（忧郁的眼睛）回复于 2005-08-04 11:14:09 得分 0
markTop
相关问题
关键词
得分解答快速导航
相关链接
广告也精彩
反馈
