如何使用javascript创建连续图像字幕(create a continuous image marquee with javascript)

这个JavaScript创建了一个滚动框，其中的图像区域中的图像在显示区域中水平移动。当每个图像通过显示区域的一侧消失时，它将在图像系列的开始处读取。这将在选框中创建一个连续的图像滚动，只要有足够的图像填充选框显示区域的宽度，就会循环。...

这个JavaScript创建了一个滚动框，其中的图像区域中的图像在显示区域中水平移动。当每个图像通过显示区域的一侧消失时，它将在图像系列的开始处读取。这将在选框中创建一个连续的图像滚动，只要有足够的图像填充选框显示区域的宽度，就会循环。

但是，此脚本确实有一些限制：

图像以相同的大小（宽度和高度）显示。如果图像在物理上不相同，则它们都将被调整大小。这可能会导致图像质量差，因此最好始终调整源图像的大小。
图像的高度必须与为选框设置的高度相匹配，否则，图像的大小将与上述不良图像的可能性相同。
图像宽度乘以图像数量必须大于选框宽度。如果没有足够的图像，最简单的修复方法就是重复阵列中的图像以填补空白。
该脚本提供的唯一交互是当鼠标移到字幕上时停止滚动，当鼠标移离图像时恢复滚动。我们稍后将描述一个修改，可以将所有图像转换为链接。
如果页面上有多个选框，它们都以相同的速度运行，因此将鼠标悬停在其中任何一个上都会导致它们停止移动。
你需要你自己的图像。示例中的内容不属于此脚本的一部分。

图像字幕javascript代码

首先，复制以下JavaScript并将其保存为marquee.js。

此代码包含两个图像数组（用于示例页面上的两个选框），以及两个新的mq对象，其中包含要在这两个选框中显示的信息。

您可以删除其中一个对象，然后更改另一个对象以在页面上显示一个连续的选框，或者重复这些语句以添加更多的选框。

必须通过传递调用mqRotate函数将选框定义为将处理旋转的后mqr。

varmqAry1=['graphics/img0.gif'、'graphics/img1.gif'、'graphics/img2.gif'、'graphics/img3.gif'、'graphics/img5.gif'、'graphics/img6.gif'、'graphics/img7.gif'、'graphics/img8.gif'、'graphics/img9.gif'、'graphics/img10.gif'、'graphics/img11.gif'、'graphics/img12.gif'、'graphics/img12.gif'、'graphics/img13.gif'、'graphics/img14.gif'；

varmqAry2=['graphics/img5.gif'、'graphics/img6.gif'、'graphics/img7.gif'、'graphics/img8.gif'、'graphics/img9.gif'、'graphics/img10.gif'、'graphics/img11.gif'、'graphics/img12.gif'、'graphics/img13.gif'、'graphics/img14.gif'、'graphics/img0.gif'、'graphics/img1.gif'、'graphics/img10.gif'、'graphics/img10.gif'、'graphics/img10.gif'、'；

函数start（）；

var mqr=[]；functionmq（id，ary，wid）{this.mqo=document.getElementById（id）；var heit=this.mqo.style.height；this.mqo.onmouseout=function（）{mqRotate（mqr）；}；this.mqo.ary=[]；var w=ary.length；for（vari=0；i&lt；maxw；i++）{this.mqo.ary[i]=document.createElement（'img'）；this.mqo.maxary=src]；this.mqo.ary[i].style.position='absolute'；this.mqo.ary[i].style.left=（wid*i）+'px'；this.mqo.ary[i].style.height=heit；this.mqo.appendChild（this.mqo.ary[i]）；}mqr.push（this.mqo）；}函数mqr旋转（mqr）{if（！mqr）返回；for（var=mqr.length-1；j&gt；-1；j=maxary=mqr-[j]（var i=0；i&lt；maxa；i++）{var x=mqr[j].ary[i].style；x.left=（parseInt（x.left，10）-1++px'；}var y=mqr[j].ary[0].style；if（parseInt（y.left，10）+parseInt（y.width，10）&lt；0）{var z=mqr[j].shift（）；z.style.left=（parseInt（z.style.left=（parseInt（z.style.left.width）*maxa

接下来，将以下代码添加到页面的标题部分：

&lt；script type=“text/javascript”src=“marquee.js”&gt&lt/脚本&gt；

添加样式表命令

我们需要添加一个样式表命令来定义每个字幕的外观。

下面是我们在示例页面上使用的代码：

.marquee{位置：相对；溢出：隐藏；宽度：500px；高度：60px；边框：纯黑1px；}

您可以为您的选框更改任何这些属性；然而，它必须保持相对位置。

如果有外部样式表，可以将其放置在外部样式表中，也可以将其括在&lt；style type=“text/css”&gt&lt/风格&gt；标签在页面的头部。

定义将放置选框的位置

下一步是在网页中定义一个div，在其中放置图像字幕。

第一个示例框使用了以下代码：

&lt；div id=“m1”class=“marquee”&gt&lt/部门&gt；

该类将其与样式表代码相关联，而id是我们将在新的mq（）调用中用于附加图像字幕的id。

确保您的代码包含正确的值

将所有这些放在一起的最后一件事是确保在页面加载后在JavaScript中添加mq对象的代码包含正确的值。

下面是其中一个示例语句的样子：

新mq（'m1'，mqAry1,60）；

m1是显示字幕的div标签的id。
mqAry1是对将显示在字幕中的图像数组的引用。
最终值60是图像的宽度（图像将从右向左滚动，因此高度与我们在样式表中定义的高度相同）。

要添加额外的字幕，我们只需在HTML中设置额外的图像数组、额外的div，可能还需要设置额外的类，以便对字幕进行不同的样式设置，并添加尽可能多的新mq（）语句。我们只需要确保mqRotate（）调用跟随它们为我们操作字幕。

将字幕图像制作成链接

要将字幕中的图像变成链接，只需进行两项更改。

首先，将图像数组从图像数组更改为数组数组，其中每个内部数组由位置0中的图像和位置1中的链接地址组成。

变量mqAry1=['graphics/img0.gif'、'blcmarquee1.htm'、['graphics/img1.gif'、'blclockm1.htm']、…['graphics/img14.gif'、'bltypewriter.htm']；

第二件事是用以下内容替换脚本的主要部分：

//带链接的连续图像字幕//版权所有Stephen Chapman于2008年9月21日/http://javascript.about.com// 授予在网页上使用此Javascript的权限//前提是此脚本中的以下所有代码（包括这些//注释）在没有任何更改的情况下使用；var mqr=[]；函数mq（id，ary，wid）{this.mqo=document.getElementById（id）；var heit=this.mqo.style.height；this.mqo.onmouseout=function（）{mqRotate（mqr）；}；this.mqo.mary=[]；var w=ary.length；for（var i=0；i&lt；maxw；i++）{var img=document.createElement（'img'）；img.src=ari[i][0]；var lnk=document.createElement（'a'）；lnk.href=ary[i][1]；lnk.appendChild（img）；this.mqo.ary[i]=document.createElement（'div'）；this.mqo.ary[i]。this.mqo.ary[i]。style.position='absolute'；this.mqo.ary[i]。style.left=（wid*i）+'px'；this.mqo.ary[i]。style.width=wid+'px'；this.mqo.ary[i]。style.high=heit；this.mqo.appendChild（this.mqo.ary[i]）；}mqr.push（this.mqo）；}函数mqRotate（mqr）{if（！mqr）return；for（var j=mqr.length-1；j--）{maxa=mqr[j].ary.length；for（var i=0；i&lt；maxa；i++）{var x=mqr[j].ary[i].style；x.left=（parseInt（x.left，10）-1）+'px'；（parseInt）（parseInt）（parseInt）（parseInt）var=y=mqr[j].ari 0].if[10].ary.shift（）；z.style.left=（parseInt（z.style.left）+parseInt（z.style.width）*maxa）+'px'；mqr[j].ary.push（z）；}}}mqr[0]。TO=setTimeout（'mqRotate（mqr）'10）；}

剩下的你们需要做的事情和描述的并没有链接的字幕版本是一样的。