如何使用JavaScript创建连续图像字幕

This JavaScript creates a scrolling marquee in which images area where images move horizontally through the display area. As each image disappears through one side of the display area, it is readded at the beginning of the series of images. This creates a continuous scroll of images in the marquee that loops—as long as you have enough images to fill the width of the marquee display area.

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

This script does have a few limitations, however:

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

• The images are displayed at the same size (both width and height). If the images are not physically the same size then they will all be resized. This can result in poor image quality, so it is best to consistently size your source images.
  图像以相同的大小(宽度和高度)显示。 如果图像的物理尺寸不同，则将全部调整大小。 这可能会导致图像质量差，因此最好始终调整源图像的大小。
• The height of the images must match the height set for the marquee, otherwise, the images will be resized with the same potential for poor images mentioned above.
  图像的高度必须与为选取框设置的高度匹配，否则，将调整图像的大小，使其具有与上述不良图像相同的潜力。
• The image width multiplied by the number of images must be greater than the marquee width. The easiest fix for this if there are insufficient images is to just repeat the images in the array to fill the gap.
  图片宽度乘以图片数量必须大于选取框宽度。 如果图像不足，最简单的解决方法是重复阵列中的图像以填补空白。
• The only interaction this script offers is stopping the scroll when the mouse is moved over the marquee and resuming when the mouse moves off the image. We later describe a modification that can be made to convert all the images into links.
  该脚本提供的唯一交互作用是，当鼠标移至选取框上方时停止滚动，并在鼠标移离图像时继续滚动。 稍后我们将描述可以将所有图像转换为链接的修改。
• If you have multiple marquees on a page, they all run at the same speed, so mousing-over any of them will cause them all to stop moving.
  如果页面上有多个选取框，则它们都以相同的速度运行，因此将它们悬停在任何一个上都会导致它们停止移动。
• You need your own images. Those in the examples are not part of this script.
  您需要自己的图像。 示例中的内容不属于该脚本。

图片选取框JavaScript代码 ( Image Marquee JavaScript Code )

The first, copy the following JavaScript and save it as marquee.js.

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

This code contains two image arrays (for the two marquees on the example page), as well as two new mq objects containing the information to be displayed in those two marquees.

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

You may delete one of those objects and change the other to display one continuous marquee on your page or repeat those statements to add even more marquees.

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

The mqRotate function must be called passing ​mqr after the marquees are defined as that will handle the rotations.

在定义选取框之后，必须调用mqRotate函数以传递mqr，因为它将处理旋转。

varmqAry1=['graphics/img0.gif','graphics/img1.gif','graphics/img2.gif','graphics/img3.gif','graphics/img4.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/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/img2.gif','graphics/img3.gif','graphics/img4.gif'];

function start() {   new mq('m1',mqAry1,60);   new mq('m2',mqAry2,60);// repeat for as many fuields as required   mqRotate(mqr); // must come last}window.onload = start;

// Continuous Image Marquee// copyright 24th July 2008 by Stephen Chapman// http://javascript.about.com// permission to use this Javascript on your web page is granted// provided that all of the code below in this script (including these// comments) is used without any alteration

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.onmouseover=function(){clearTimeout(mqr[0].TO);}; this.mqo.ary=[]; var maxw = ary.length;for (vari=0;i<maxw;i++){this.mqo.ary[i]=document.createElement('img');this.mqo.ary[i].src=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.height =heit; this.mqo.appendChild(this.mqo.ary[i]);} mqr.push(this.mqo);}function mqRotate(mqr){if (!mqr) return; for (var j=mqr.length - 1; j> -1; j--) {maxa = mqr[j].ary.length; for (var i=0;i<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)<0){var z = mqr[j].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);}

Next, add the following code into the head section of your page:

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

<script type="text/javascript" src="marquee.js"></script>

<script type="text/javascript" src="marquee.js"></script>

添加样式表命令 ( Add a Style Sheet Command )

We need to add a style sheet command to define how each of our marquees will look.

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

Here's the code we used for the ones on the example page:

这是我们用于示例页面上的代码：

.marquee {position:relative;     overflow:hidden;     width:500px;     height:60px;     border:solid black 1px;     }

.marquee {position:relative; overflow:hidden; width:500px; height:60px; border:solid black 1px; }

You can change any of these properties for your marquee; however, it must remain position:relative. 

您可以为选取框更改任何这些属性。 但是，它必须保持position:relative 。

You can either place it in your external style sheet if you have one or enclose it between <style type="text/css"> </style> tags in the head of your page.

您可以将其放在外部样式表中(如果有的话)，也可以将其放在页面顶部的<style type="text/css"> </style>标记之间。

定义放置选框的位置 ( Define Where You Will Place the Marquee )

The next step is to define a div in your web page where you will place the marquee of images.

下一步是在网页中定义一个div，您将在其中放置图像选取框。

The first of the example marquees used this code:

字幕框的第一个使用以下代码：

<div id="m1" class="marquee"></div>

The class associates this with the stylesheet code while the id is what we will use in the new mq() call to attach the marquee of images.

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

确保您的代码包含正确的值 ( Ensure Your Code Contains the Right Values )

The final thing to do to put all of this together is make sure that your code to add the mq object in your JavaScript after the page loads contains the right values.

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

Here's what one of the example statements looks like:

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

new mq('m1',mqAry1,60);

• The m1 is the id of our div tag that will display the marquee.
  m1是将显示选取框的div标签的ID。
• mqAry1 is a reference to an array of images that will be displayed in the marquee.
  mqAry1是对将在选框中显示的图像数组的引用。
• The final value 60 is the width of our images (the images will scroll from right to left and so the height is the same as we defined in the style sheet).
  最终值60是图像的宽度(图像将从右向左滚动，因此高度与样式表中定义的高度相同)。

To add additional marquees we just set up additional image arrays, additional divs in our HTML, possibly set up additional classes so as to style the marquees differently, and add as many new mq() statements as we have marquees. We just need to make sure that the mqRotate() call follows them to operate the marquees for us.

要添加其他字幕，我们只需设置其他图像数组，HTML中的其他div，还可以设置其他类以对字幕进行不同的样式设置，并添加与字幕相同的新mq()语句。 我们只需要确保mqRotate()调用跟随它们，即可为我们操作字幕。

使选取框图像成为链接 ( Making Marquee Images Into Links )

There are only two changes you need to make in order to make the images in the marquee into links.

为了使选取框中的图像成为链接，只需进行两项更改。

First, change your image array from an array of images to an array of arrays where each of the internal arrays consists of an image in position 0 and the address of the link in position 1.

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

var mqAry1=[['graphics/img0.gif','blcmarquee1.htm'],['graphics/img1.gif','blclockm1.htm'],...['graphics/img14.gif', 'bltypewriter.htm']];

The second thing to do is to substitute the following for the main part of the script:

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

// Continuous Image Marquee with Links// copyright 21st September 2008 by Stephen Chapman// http://javascript.about.com// permission to use this Javascript on your web page is granted// provided that all of the code below in this script (including these// comments) is used without any alterationvar mqr = []; function mq(id,ary,wid){this.mqo=document.getElementById(id); var heit = this.mqo.style.height; this.mqo.onmouseout=function() {mqRotate(mqr);}; this.mqo.onmouseover=function() {clearTimeout(mqr[0].TO);}; this.mqo.ary=[]; var maxw = ary.length; for (var i=0;i<maxw;i++){var img=document.createElement('img'); img.src=ary[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].appendChild(lnk); 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.height = heit; this.mqo.appendChild(this.mqo.ary[i]);} mqr.push(this.mqo);} function mqRotate(mqr){if (!mqr) return; for (var j=mqr.length - 1; j > -1; j--) {maxa = mqr[j].ary.length; for (var i=0;i<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)<0) {var z = mqr[j].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);}

The rest of the what you need to do remains the same as described for the version of the marquee without the links.

您需要执行的其余操作与没有链接的字幕版本相同。

翻译自: https://www.thoughtco.com/how-to-create-a-continuous-image-marquee-with-javascript-4070313