几幅图片的走马灯效果怎么做？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了几幅图片的走马灯效果怎么做？相关的知识，希望对你有一定的参考价值。

实现跑马灯的方法很多，其中最简单的是采用一句html代码来实现，我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句，它的效果如下所示：

滚动的文字

适当的运用<marquee>标签的参数，可以表现出不同的效果，请看下面的几个例子：

1、左右弹来弹去的跑马灯

弹来弹去跑马灯!

实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示双向移动，direction=left表示运动方向向左。marquee的宽度可以使用绝对象素值，例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在Netscape下是看不到的。

源码粘贴框：

<marquee width=400 behavior=alternate direction=left align=middle border=1>弹来弹去跑马灯!</marquee>

2、跑的很快的跑马灯

跑的很快跑马灯!

只要在<marquee>标签内加上“scrollamount=30”参数即可。

3、带有超级链接的跑马灯

带有超链接的跑马灯!点我试试？ 还有一条呢!点我试试？

其实实现的方法很简单，把整个<marquee></marquee>语句包含在超链接中就行，你看看下面的代码就清楚了。当然你也可以把包含在<marquee></marquee>中的各条内容分别加上不同的链接，这样的跑马灯用来发布滚动新闻或是做站点导航再合适不过了。

源码粘贴框：

<marquee width=90%>
<a href="http://www.hongen.com/default.htm" target=_blank>带有超链接的跑马灯!点我试试？</a>
<a href="http://www.hongen.com/pc/index.htm" target=_blank>还有一条呢!点我试试？</a>
</marquee>

以上几个例子都是<marquee>标签参数的应用，下面把所有可以利用的参数列在表中供你参考，不过还是要提醒你，<marquee>标签只被IE所支持，使用Netscape浏览器是看不到的噢。

参数 用法介绍
behavior=scroll, slide, alternate 跑马方式：循环绕行，只跑一次就停住，来回往复运动
direction=left,right 跑马方向：从左向右，从右向左
loop=100 跑马次数：循环100次，如不写默认为一直循环
width=100%,height=200 跑马范围：宽为100%，高为200像素
scrollamount=20 跑马速度：数越大越快
scrolldelay=500 跑马延时：毫秒数，利用它可实现跃进式滚动
hspace=20，vspace=20 跑马区域与其它区域间的空白大小
bgcolor=#00FFCC 跑马区域的背景颜色

这里向你介绍几个用javascript实现的较复杂的跑马灯，你只须把源码粘贴框中的代码按照说明复制的指定的位置就能看到跑马灯的效果。

1、状态栏中的跑马灯

在默认状态下浏览器的状态栏中显示的是链接指向信息，给人的感觉很单调。如果我们把问候语或是站点的介绍放在状态栏中滚动显示，一定能取得很好的效果。

源码粘贴框：

1、将以下代码放在<head>与</head>之间：

<script LANGUAGE="JavaScript">
<!-- Begin
var Mes=new Array();
Mes[0]="洪恩在线欢迎你！ ";
Mes[1]="感谢你关注电脑交互教程 ";
Mes[2]="网页制作技巧 之 跑马灯大全 ";
var place=1;
var i=0;
function scroll()

window.status=Mes[i].substring(0, place);
if (place >= Mes[i].length)

if(i<2)

i++;
place=1;
window.setTimeout("scroll()",50);

else

i=0;
place=1;
window.setTimeout("scroll()",50);


else
place++;
window.setTimeout("scroll()",50);


// End -－>
</script>

2、在<body>标签内加入onload 语句：

<body onload="scroll();">

实现步骤:
(1)首先将JavaScript代码复制到<head>与</head>之间，这段代码中包含了scroll()函数，它是实现跑马灯的主体代码。我们可以修改mes[]数组的值来改变跑马灯的内容，你也可以显示更多条的信息，不过代码中i的值应等于信息的条数，也就是等于mes[]数组的维数；
(2)然后在<body>标签中加入onload()语句即可。

2、超链接的跑马灯式提示信息

把你的“老鼠”移到下面链接上试一试，有什么不同呢？原来弹出了一条跑马灯式的提示信息，这是怎么实现的呢，请接着看：

跑马灯大全(一) 电脑交互教程 网页制作技巧技巧

源码粘贴框：

1.将下面代码放在<body>标签下：

<script>
if (!document.layers&&!document.all)
event="test"
function showtip2(current,e,text)

if (document.all&&document.readyState=="complete")
document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tooltip2.style.visibility="visible"


else if (document.layers)
document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"


function hidetip2()
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers)
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"



function scrolltip()
if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150


</script>

2.然后在要出现提示信息的链接中，添加onMouseover语句：

<a href="pm23.htm" onMouseover="showtip2(this,event,'用marquee实现的各式跑马灯')" onMouseout="hidetip2()">跑马灯大全(一)</a>
<a href="/pc/index.htm" onMouseover="showtip2(this,event,'最多最全的电脑交互教程')" onMouseout="hidetip2()">电脑交互教程</a>
<a href="pmjq00.htm" onMouseover="showtip2(this,event,'点滴技巧装扮你的家')" onMouseout="hidetip2()">网页制作技巧技巧</a>

实现步骤：
(1)先在<body>标签下面插入一段JavaScript代码；

(2)然后在需要实现跑马灯式提示信息效果的超链接中加入Onmouseover和Onmouseout语句。

还有一个参考下面的网址

参考资料：http://www.rainbow6.cn/article.asp?id=334

 参考技术A 跟你给一个从右到左的跑马灯较果，一些高宽你自己设置，这个你会吧！加到<body>标签里就行了
<MARQUEE onmouseover=this.scrollDelay=10000 onmouseout=this.scrollDelay=30 scrollAmount=1 scrollDelay=30 direction=left height=100%>
<table width="200" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20"><img src="你图片的地址1"></a></td>
<td width="20"><img src="你图片的地址2"></a></td>
<td width="20"><img src="你图片的地址3"></a></td>
<td width="20"><img src="到N张"></a></td>
<tr>
</table>
</MARQUEE>本回答被提问者采纳 参考技术B <body background="img/bg8.gif" onload="init()">
<SCRIPT language=JavaScript >

<!--

function init()

var start = 0

ns4 = (document.layers)? true:false

ie4 = (document.all)? true:false

if (ns4) block = window.document.blockDiv.visibility="hide"

if (ie4)

block = blockDiv.style

block.xpos = parseInt(block.left)

slide()





function slide()

if (block.xpos <= 1)

var start = 0

document.all.blockDiv.style.visibility="hidden";

block.xpos = 700;

block.left = block.xpos;

setTimeout("slide()",2000);



else

document.all.blockDiv.style.visibility="visible";

if (start == 0)

start = 1



block.xpos -= 2;

block.left = block.xpos;

setTimeout("slide()",20);





//-->

</SCRIPT>
<DIV id=blockDiv style="left: 479; position: absolute; top: 51; visibility: inherit; z-index: 5; width: 37px; height: 28"><img alt=冰海家园 src="up/js/tp/tp013.gif" width="28" height="28">
</DIV>

js图片跑马灯效果

<style. type="text/css">
body{margin:0px auto; padding:0px;}
ul,li{margin:0px; padding:0px;list-style.:none;}
.sqBorder {width:122px; height:182px; padding:10px; border:1px #000000 solid; background:#555555;}
.scroll_div {width:122px; height:180px; margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
.scroll_div img {width:120px;height:60px;border:0;margin: 8px auto; border:1px #efefef solid;}
</style>
<script. language="javascript">
function ScrollImgTop(){
var speed=20; //品络科技 www.pinluo.com
var scroll_begin = document.getElementById("scroll_begin");
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML
function Marquee(){
if(scroll_end.offsetTop-scroll_div.scrollTop<=0)
scroll_div.scrollTop-=scroll_begin.offsetHeight
else
scroll_div.scrollTop++
}
var MyMar=setInterval(Marquee,speed)
scroll_div.onmouseover=function() {clearInterval(MyMar)}
scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
}
</script>
<h2 align="center">向上滚动</h2>
<div style="text-align:center">
<div class="sqBorder">
<!--#####滚动区域#####-->
<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<ul>
<li><img src=http://www.1netmedia.net/images/main_logo.gif /></li>
<li><img src="http://www.1netmedia.net/images/main_logo.gif" /></li>
<li><img src=http://www.1netmedia.net/images/main_logo.gif" /></li>
<li><img src="http://www.1netmedia.net/images/main_logo.gif" /></li>
<li><img src="http://www.1netmedia.net/images/main_logo.gif"/></li>
<li><img src="http://www.1netmedia.net/images/main_logo.gif" /></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>
<!--#####滚动区域#####-->
</div>
<script. type="text/javascript">ScrollImgTop();</script>
</div>
<!--//向上滚动代码结束-->

以上是关于几幅图片的走马灯效果怎么做？的主要内容，如果未能解决你的问题，请参考以下文章

ElementUI的走马灯效果应用

怎么做成不间断的跑马灯效果??/

android 怎么实现跑马灯效果

Jquery 图片走马灯效果原理

android怎样实现跑马灯效果

Jquery 图片走马灯效果原理