学习JavaScript笔记「4」

2017-09-07 约 55 分钟 #notes #javascript #web

图像

涉及html:

标　签	  属　性	    意　义
img		    其中包含描述浏览器要显示的图像的属性
        src	    包含图像的URL，这个URL是相对于网页的URL来说的
        width	    包含浏览器显示图像所用的宽度（以像素为单位）
        height      包含浏览器显示图像所用的高度（以像素为单位）
        alt	    用来在非图形化浏览器中替代图像
        id	    唯一标识符，JavaScript将用它来操纵图像

翻转器

使用JavaScript预先将所有图像加载到浏览器的缓存中，并且将图像放进脚本使用的变量中。

html代码:

<body>
　　<a href="next1.html"><img src="images/button1_off.gif" alt="button1" id="button1"></a>
    &nbsp;&nbsp;　　
    <a href="next2.html"><img src="images/button2_off.gif" alt="button2" id="button2"></a>
</body>

script02.js:

window.onload = rolloverInit;

function rolloverInit() {
　　for (var i=0; i<document.images.length;i++) {
　　　　if (document.images[i].parentNode.tagName == "A") {
　　　　　setupRollover(document.images[i]);
　　　　}
　　}
}

function setupRollover(thisImage) {
　　thisImage.outImage = new Image();
　　thisImage.outImage.src = thisImage.src;
　　thisImage.onmouseout = function() {
　　　　this.src = this.outImage.src;
　　}

　　thisImage.overImage = new Image();
　　thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
　　thisImage.onmouseover = function() {
　　　　this.src = this.overImage.src;
　　}
}

<a href="next1.html"><img src="images/button1_off.gif" alt="button1" id="button1"> </a>

它们是用于按钮的典型链接标签，其中嵌入了图像标签。href属性描述当用户单击链接时链接的目标。在img标签中，src属性提供在用户将鼠标移动到图像上之前显示的图像的路径。链接标签也定义了图像的alt文本。注意，这两个按钮都有id属性。id对于每个对象必须是唯一的。脚本使用图像的id使翻转器发挥作用。

window.onload = rolloverInit;

当页面完成加载时，会触发window.onload事件处理程序。这个处理程序调用rolloverInit()函数。这里使用这个处理程序确保在页面完成加载之前脚本不会执行。这是因为在页面完成加载之前，页面上的某些元素如果还没有加载，引用页面上的元素可能会导致错误。

function rolloverInit() {
for (var i=0; i<document.images. length; i++) {

rolloverInit()函数扫描页面上的每个图像，检查图像外边的标签是否是标签，如果是，就说明它是一个链接。这两行中的第一行是函数的开头。第二行开始一个for...next循环，这个循环遍历所有图像。它首先将计数器变量i设置为0。然后，在每次循环迭代中，如果i的值小于文档中的图像数量，就将i递增1。

if (document.images[i].parentNode.tagName == "A") {

这里检查包围图像的标签是否是锚标签。检查方法是查看对象的值是否为A（A是锚标签的名称）。我们来仔细看看这里的表达式。第一部分document.images[i]是当前的图像。它的parentNode属性是包围它的容器标签，而tagName提供容器标签的名称。所以，圆括号中代码的意思是：“对于这个特定的图像，包围它的标签是A吗？”

setupRollover(document.images[i]);

调用setupRollover函数并传递当前图像。

function setupRollover(thisImage) {

在逐行查看这个函数之前，先看一下整个函数的作用：这个函数将两个新的属性添加到传递给它的图像对象中。新的属性是outImage（鼠标不在图像上时的图像版本）和overImage（鼠标在图像上时的图像版本），它们本身都是图像对象。因为它们是图像对象，所以被创建后，就可以添加它们的src属性了。outImage的src值是当前图像的src，overImage的src值是根据原图像的id属性计算出来的。这一行开始setupRollover函数，其参数是前面的rolloverInit()函数传递给它的图像。

thisImage.outImage = new Image();

这一行获得传递进来的图像对象，并在其中添加新的outImage属性。因为可以在对象上添加任何类型的属性，而且属性本身也是对象，所以这里的操作是将一个图像对象添加到图像中。新的图像对象的圆括号是可选的，但这是良好的做法。如果需要的话，可以通过传递参数设置新图像对象的属性。

thisImage.outImage.src = thisImage.src;

现在，将新的outImage的来源设置为与thisImage的来源相同。页面上的默认图像也就是鼠标不在图像上时看到的图像。

thisImage.onmouseout = function() {
　this.src = this.outImage.src;
}

第一行开始定义一个匿名函数。可以给它指定一个名称，但是因为它只有一行代码，所以不需要命名。在这里，我们告诉浏览器当用户把鼠标移出图像时应该触发什么操作。当发生这种情况时，希望把图像源恢复为最初的值。

thisImage.overImage = new Image();
thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";

在第一行中，创建一个新的图像对象，它将包含图像的overImage版本。第二行设置overImage的来源。它将"images/"和图像的id拼接起来，再加上"_on.gif"，从而在运行时构造出源文件名。

thisImage.onmouseover = function() {
　this.src = this.overImage.src;
}

这是另一个匿名函数。它告诉浏览器，当用户将鼠标移动到图像上时，应该把当前图像的源重新设置为overImage版本。

tagName总是返回大写的值。

构建三状态翻转器

三状态翻转器就是能够显示图像的3个版本的翻转器。除了原始图像和当用户将鼠标移动到图像上时显示的图像之外，图像还有第三个版本，这个版本在按钮本身被单击时显示。三状态翻转器的HTML实质上与两状态翻转器相同构建三状态翻转器：

window.onload = rolloverInit;

function rolloverInit() {
　　for (var i=0; i<document.images.length;i++) {
　　　　if (document.images[i].parentNode.tagName == "A") {
　　　　　setupRollover(document.images[i]);
　　　　}
　　}
}

function setupRollover(thisImage) {
　　thisImage.outImage = new Image();
　　thisImage.outImage.src = thisImage.src;
　　thisImage.onmouseout = function() {
　　　　this.src = this.outImage.src;
　　}
　　thisImage.clickImage = new Image();
　　thisImage.clickImage.src = "images/" + thisImage.id + "_click.gif";
　　thisImage.onclick = function() {
　　　　this.src = this.clickImage.src;
　　}

　　thisImage.overImage = new Image();
　　thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
　　thisImage.onmouseover = function() {
　　　　this.src = this.overImage.src;
　　}
}

thisImage.clickImage = new Image();
thisImage.clickImage.src = "images/" + thisImage.id + "_click.gif";

在setupRollover()函数中，我们需要添加第三个图像属性，它用于单击状态。在第一行中，我们创建一个新的图像对象，它将包含图像的clickImage版本。第二行设置clickImage的来源。它将"images/"和图像的id拼接起来，再加上"_click.gif"，从而在运行时构造出源文件名。

thisImage.onclick = function() {
　this.src = this.clickImage.src;
}

这一行告诉浏览器，当用户在图像上单击鼠标时，应该做什么。在这种情况下，将图像的来源设置为图像的clickImage版本。

链接触发翻转器

在用户将鼠标指向文本链接时翻转。

由文本链接触发的翻转器的HTML:

<body>
　　<h1><a href="next.html" id="arrow">Next page</a></h1>
　　<img src="images/arrow_off.gif" id="arrowImg" alt="arrow">
</body>

由文本链接触发的翻转器的JavaScript:

window.onload = rolloverInit;

function rolloverInit() {
　　for (var i=0; i<document.links.length;i++) {
　　　　var linkObj = document.links[i];
　　　　if (linkObj.id) {
　　　　　var imgObj = document.getElementById(linkObj.id + "Img");
　　　　　if (imgObj) {
　　　　　　　setupRollover(linkObj,imgObj);
　　　　　}
　　　　}
　　}
}

function setupRollover(thisLink,thisImage) {
　　thisLink.imgToChange = thisImage;
　　thisLink.onmouseout = function() {
　　　　this.imgToChange.src = this.outImage.src;
　　}
　　thisLink.onmouseover = function() {
　　　　this.imgToChange.src = this.overImage.src;
　　}

　　thisLink.outImage = new Image();
　　thisLink.outImage.src = thisImage.src;

　　thisLink.overImage = new Image();
　　thisLink.overImage.src = "images/" + thisLink.id + "_on.gif";
}

function rolloverInit() {
for (var i=0; i<document.links.length; i++) {

开始rolloverInit()函数，然后开始一个循环，以前寻找的是图像（document.images.length），而这里要寻找链接（document.links.length）。这个循环首先将计数器变量i设置为0。在每次迭代中，如果i的值小于文档中的链接数量，就将i递增1。

var linkObj = document.links[i];

创建linkObj变量并将它设置为当前链接。

if (linkObj.id) {
var imgObj = document.getElementById(linkObj.id + "Img");

如果linkObj有id，就检查页面上是否有对应的图像元素，这个元素的id是linkObj的id加上Img。如果有这样的元素，就将它放进新变量imgObj中。

if (imgObj) {
setupRollover(linkObj,imgObj);

如果imgObj存在，那么调用setupRollover()函数，并将链接对象和图像对象传递给它。

function setupRollover(thisLink, thisImage) {
thisLink.imgToChange = thisImage;

在setupRollover()中，首先传递链接和图像参数，在链接对象中添加一个新的属性imgToChange。JavaScript需要知道当鼠标停留在链接上时要改变哪个图像，imgToChange用来存储这一信息。

thisLink.onmouseout = function() {
　this.imgToChange.src = this.outImage.src;
}
　thisLink.onmouseover = function() {
　this.imgToChange.src = this.overImage.src;
}

mouseOver和mouseOut被触发时，重新设置this.imgToChange.src，而不是设置this.src本身。

多个链接触发一个翻转器

当用户将鼠标移动到图像上时，出现对它的描述：

<!DOCTYPE html>
<body>
　　<div id="captionDiv">
　　　　<img src="images/DaVinci.jpg" width="144" height="219" alt="DaVinci">
　　　　<img src="images/bg.gif" id="captionField" alt="Text Field">
　　</div>
　　<div id="inventionDiv">
　　　　<img src="images/leoText.gif" id="heading" alt="Leonardo’s Inventions">
　　　　<a href="flyPage.html" class= "captionField" id="flyer"><img src= "images/flyer.gif" width="293"
　　　　➝height="165" alt="Flying Machine" id="flyerImg"></a>
　　　　<a href="tankPage.html" class= "captionField" id="tank"><img src="images/tank.gif" width="325"
　　　　➝height="92" alt="Tank" id="tankImg"></a>
　　　　<a href="heliPage.html" class="captionField" id="helicopter"><img src="images/helicopter.gif"
　　　　➝width="224" height="160" alt="Helicopter" id="helicopterImg"></a>
　　</div>
</body>

CSS：

body {
　　background-color: #EC9;
}

img {
　　border-width: 0;
}
#captionDiv {
　　float: right;
　　width: 210px;
　　margin: auto 50px;
}

#captionField {
　　margin: 20px auto;
　　width: 208px;
　　height: 27px;
}

#inventionDiv {
　　width: 375px;
　　margin-left: 20px;
}

#heading {
　　margin-bottom: 20px;
　　width: 375px;
　　height: 26px;
}

多个链接触发一个翻转器js：

window.onload = rolloverInit;

function rolloverInit() {
　　for (var i=0; i<document.links.length;i++) {
　　　　var linkObj = document.links[i];
　　　　if (linkObj.className) {
　　　　　var imgObj = document.getElementById(linkObj.className);
　　　　　if (imgObj) {
　　　　　　　setupRollover(linkObj,imgObj);
　　　　　}
　　　　}
　　}
}

function setupRollover(thisLink,textImage) {
　　thisLink.imgToChange = textImage;
　　thisLink.onmouseout = function() {
　　　　this.imgToChange.src = this.outImage.src;
　　}
　　thisLink.onmouseover = function() {
　　　　this.imgToChange.src = this.overImage.src;
　　}

　　thisLink.outImage = new Image();
　　thisLink.outImage.src = textImage.src;

　　thisLink.overImage = new Image();
　　thisLink.overImage.src = "images/" +thisLink.id + "Text.gif";
}

if (linkObj.className) {
var imgObj = document.getElementById(linkObj.className);

无法使用翻转图像的id计算出改变过的图像的id，这是因为id必须是唯一的，而所有翻转图像必须为改变过的图像的目的地提供同样的值。因此，我们要使用class属性（因为多个页面元素可以共享同一个class）。在这一行上，寻找链接对象的className。

function setupRollover(thisLink,textImage) {
thisLink.imgToChange = textImage;

我们将当前链接对象（thisLink）和图像对象（我们称之为textImage）传递给setupRollover()函数。注意，在传递这些对象（也可以称为变量）时，分别将它们称为linkObj和imgObj。

多个翻转器

在将鼠标移动到一个图像上时，描述出现，而且图像本身加上阴影.

处理多个翻转器js:

window.onload = rolloverInit;

function rolloverInit() {
　　for (var i=0; i<document.links.length; i++) {
　　　　var linkObj = document.links[i];
　　　　if (linkObj.className) {
　　　　　var imgObj = document.getElementById(linkObj.className);
　　　　　if (imgObj) {
　　　　　　　setupRollover(linkObj,imgObj);
　　　　　}
　　　　}
　　}
}

function setupRollover(thisLink,textImage) {
　　thisLink.imgToChange = new Array;
　　thisLink.outImage = new Array;
　　thisLink.overImage = new Array;

　　thisLink.imgToChange[0] = textImage;
　　thisLink.onmouseout = rollOut;
　　thisLink.onmouseover = rollOver;

　　thisLink.outImage[0] = new Image();
　　thisLink.outImage[0].src = textImage.src;
　　thisLink.overImage[0] = new Image();
　　thisLink.overImage[0].src = "images/" + thisLink.id + "Text.gif";

　　var rolloverObj = document.getElementById(thisLink.id + "Img");
　　if (rolloverObj) {
　　　　thisLink.imgToChange[1] = rolloverObj;

　　　　thisLink.outImage[1] = new Image();
　　　　thisLink.outImage[1].src = rolloverObj.src;

　　　　thisLink.overImage[1] = new Image();
　　　　thisLink.overImage[1].src = "images/" + thisLink.id + "_on.gif";
　　}
}
function rollOver() {
　　for (var i=0;i<this.imgToChange.length; i++) {
　　　　this.imgToChange[i].src = this.overImage[i].src;
　　}
}

function rollOut() {
　　for (var i=0;i<this.imgToChange.length; i++) {
　　　　this.imgToChange[i].src = this.outImage[i].src;
　　}
}

thisLink.imgToChange = new Array;
thisLink.outImage = new Array;
thisLink.overImage = new Array;

脚本有更多的图像需要处理（每个翻转器有两个图像）。在每一行中，为thisLink创建一个新属性，每个属性都是一个数组（array）。

thisLink.imgToChange[0] = textImage;

在这里，它是一个包含图像的数组。在这一行中，textImage被存储在imgToChange的第一个元素中。

thisLink.outImage[0] = new Image();
thisLink.outImage[0].src = textImage.src;

存储图像的outImage版本，但是这一次它被存储在outImage数组的第一个元素中。

thisLink.overImage[0] = new Image();
thisLink.overImage[0].src = "images/" + thisLink.id + "Text.gif";

同样，计算出图像的overImage版本的文件名并将其存储在overImage数组的第一个元素中。

var rolloverObj = document.getElementById(thisLink.id + "Img");
if (rolloverObj) {

现在，需要查明这个翻转器是否将触发多个图像，而不只是一个图像。如果是这种情况，HTML页面上就会有一个对应的元素，它的id是当前链接的id加上Img。

thisLink.imgToChange[1] = rolloverObj;

按照前面设置imgToChange[0]的方式，将imgToChange[1]（数组中的第二个元素）设置为新的rolloverObj。当触发onmouseout和onmouseover事件处理程序时，两个图像将被替换为它们的替代版本，我们将在稍后看到这一点。

thisLink.outImage[1] = new Image();
thisLink.outImage[1].src = rolloverObj.src;

将outImage数组的第二个元素设置为图像的outImage版本。

thisLink.overImage[1] = new Image();
thisLink.overImage[1].src = "images/" + thisLink.id + "_on.gif";

这里计算出图像的overImage版本的文件名并将其存储在overImage数组的第二个元素中。

for (var i=0; i<this.imgToChange.length; i++) {
　this.imgToChange[i].src = this.overImage[i].src;
}

这段代码在rollOver()函数中，这里是对图像进行切换的地方。因为可能要改变一个或多个图像，所以首先需要了解已经存储了多少个图像，也就是this.imgToChange.length的值。在这个示例中，这个值是2，因为有两个图像需要改变。然后进行两次迭代，将imgToChange[0]和imgToChange[1]的来源设置为对应的overImage值。

for (var i=0; i<this.imgToChange.length; i++) {
　this.imgToChange[i].src = this.outImage[i].src;
}

将这些图像设置为outImage版本的来源值。

循环的广告条

HTML页面在循环的广告条中加载第一个图像，其他工作由JavaScript处理：

<body>
　　<div class="centered">
　　　　<img src="images/reading1.gif" id="adBanner" alt="Ad Banner">
　　</div>
</body>

使用JavaScript在广告条中循环显示图像：

window.onload = rotate;

var thisAd = 0;

function rotate() {
　　var adImages = new Array("images/ reading1.gif","images/reading2. gif","images/reading3.gif");

　　thisAd++;
　　if (thisAd == adImages.length) {
　　　　thisAd = 0;
　　}
　　document.getElementById("adBanner").src = adImages[thisAd];

　　setTimeout(rotate, 3 * 1000);
}

var thisAd = 0;

首先创建变量thisAd，它在这段代码中被设置了初始值。

function rotate() {
var adImages = new Array("images/reading1.gif","images/reading2.gif","images/reading3.gif");

先建立一个称为rotate()的新函数。第二行代码创建一个名为adImages的新数组，它包含构成循环广告条的3个GIF文件的文件名。

thisAd++;

这一行将thisAd的值加1。

if (thisAd == adImages.length) {
thisAd = 0;

这一行代码检查thisAd的值是否等于adImages数组中成员的数量，如果等于，就将thisAd的值设置为0。 document.getElementById("adBanner").src = adImages[thisAd];页面上循环显示的图像的id是adBanner。，img标签中定义了这个id。这行代码指出，adBanner图像的来源在adImages数组中，而且thisAd变量的值决定浏览器当前应该使用3个GIF中的哪一个。

setTimeout(rotate, 3 * 1000);

这一行告诉脚本每隔多长时间改变广告条中的GIF。在这个示例中，每3000毫秒（即3秒）调用一次rotate()函数，广告条中的GIF每3秒改变一次。

在循环广告条中添加链接

广告条所需的HTML:

<body>
　　<div class="centered">
　　　　<a href="linkPage.html"><img src= "images/banner1.gif" id="adBanner" alt="ad banner"></a>
　　</div>
</body>

js:

window.onload = initBannerLink;

var thisAd = 0;

function initBannerLink() {
　　if (document.getElementById("adBanner").parentNode.tagName == "A") {
　　　　document.getElementById("adBanner").parentNode.onclick = newLocation;
　　}

　　rotate();
}

function newLocation() {
　　var adURL = new Array("negrino.com","sun.com","microsoft.com");
　　document.location.href = "http://www." + adURL[thisAd];
　　return false;
}

function rotate() {
　　var adImages = new Array("images/ banner1.gif","images/banner2.gif","images/banner3.gif");

　　thisAd++;
　　if (thisAd == adImages.length) {
　　　　thisAd = 0;
　　}
　　document.getElementById("adBanner").src = adImages[thisAd];

　　setTimeout(rotate, 3 * 1000);
}

window.onload = initBannerLink;

当窗口完成加载时，触发initBannerLink()函数。

if (document.getElementById("adBanner").parentNode.tagName == "A") {
　document.getElementById ("adBanner").parentNode.onclick = newLocation;
}
rotate();

这段代码在initBannerLink()函数中，它首先检查adBanner对象是否包围在链接标签中。如果是这样，那么当单击链接时，将调用newLocation()函数。最后，调用rotate()函数。

function newLocation() {
var adURL = new Array("negrino.com","sun.com","microsoft.com");

在新函数newLocation()中，adURL变量被设置为一个包含3个成员的新数组。这里只存储域名，因为下面将组合出完整的URL。

document.location.href = "http://www." + adURL[thisAd];
return false;

这段代码在新函数newLocation中，将document.location.href对象（换句话说，就是当前文档窗口）设置为文本字符串http://www.（注意点号）加上adURL的值。因为adURL是一个数组，所以需要指定数组的一个成员。成员的编号存储在thisAd中，产生的字符串可以是三个链接之一（取决于用户何时进行单击）。最后，它返回false，告诉浏览器不应再加载这个href。如果不这样做，浏览器就会加载这个URL两次。我们已经在JavaScript中处理了所有工作，所以不需要再加载href。

##　建立循环式幻灯片

HTML:

<body>
　　<div class="centered">
　　　　<h1>Welcome, Robot Overlords!</h1>
　　　　<img src="images/robot1.jpg" id="myPicture" width="200" height="400" alt="Slideshow">
　　　　<h2><a href="previous.html" id="prevLink"><< Previous </a>&nbsp;&nbsp;<a href="next. html"
　　　　➝id="nextLink">Next >></a></h2>
　　</div>
</body>

构建一个幻灯片，用户可以通过单击链接控制图像的前后切换

window.onload = initLinks;

var myPix = new Array("images/robot1.jpg","images/robot2.jpg","images/robot3.jpg");
var thisPic = 0;

function initLinks() {
　　document.getElementById("prevLink").onclick = processPrevious;
　　document.getElementById("nextLink").onclick = processNext;
}

function processPrevious() {
　　if (thisPic == 0) {
　　　　thisPic = myPix.length;
　　}
　　thisPic--;
　　document.getElementById("myPicture").src = myPix[thisPic];
　　return false;
}

function processNext() {
　　thisPic++;
　　if (thisPic == myPix.length) {
　　　　thisPic = 0;
　　}
　　document.getElementById("myPicture").src = myPix[thisPic];
　　return false;
}

这个脚本构建的幻灯片是循环式的（wrap around），也就是说，如果超过了图像列表的末尾，就会返回到开头，反之亦然。图4-14显示这个幻灯片的效果。

function initLinks() {
　document.getElementById ("prevLink").onclick = processPrevious;
　document.getElementById ("nextLink").onclick = processNext;
}

这个函数为Previous或Next链接设置onclick事件处理程序。

function processPrevious() {
if (thisPic == 0) {
　thisPic = myPix.length;

这个函数使幻灯片向前切换图像。它首先检查thisPic是否等于0。如果是，这个函数就获取myPix数组中的图像数量。

thisPic--;
document.getElementById("myPicture").src = myPix[thisPic];

第一行将thisPic的值减1。下一行将myPicture的src属性设置为myPix数组中与thisPic的当前值对应的元素。

thisPic++;
if (thisPic == myPix.length) {
　　thisPic = 0;
}
document.getElementById ("myPicture").src = myPix[thisPic];

这段代码在processNext()函数中，它使幻灯片向后切换图像，其工作方式与processPrevious()函数非常相似。它首先将thisPic的值加1，然后检查thisPic的值是否等于myPix数组中成员的数量。如果是，就将thisPic设置为0。下一行设置myPicture的src属性。

随机图像

html:

<body>
　　<img src="images/spacer.gif" width="305" height="312" id="myPicture" alt="some image">
</body>

js

使用JavaScript的Math.random方法生成一个随机数

window.onload = choosePic;

function choosePic() {
　　var myPix = new Array("images/lion.jpg","images/tiger.jpg","images/bear.jpg");
　　var randomNum = Math.floor ((Math.random() * myPix.length));
　　document.getElementById("myPicture").src = myPix[randomNum];
}

var myPix = new Array("images/lion.jpg", "images/tiger.jpg","images/bear.jpg");

与前面一样，建立一个包含三个图像的数组，并且将它赋值给变量myPix。

randomNum = Math.floor((Math.random() * myPix.length));

变量randomNum被设置为一个数学表达式的值。这个表达式最好是从内向外读。Math.random生成一个0～1的随机数，然后将这个数字乘以myPix.length，即数组中的成员数量（在这个示例中是3）。Math.floor将结果向下取整，这意味着最终产生0、1和2中的一个数字。

document.getElementById("myPicture").src = myPix[randomNum];

这行代码根据myPix数组设置myPicture图像的来源，当前采用的值由randomNum的值决定。

随机循环显示图像

window.onload = choosePic;
var adImages = new Array("images/reading1.gif","images/reading2.gif","images/reading3.gif");
var thisAd = 0;

function choosePic() {
　　thisAd = Math.floor((Math.random() * adImages.length));
　　document.getElementById("adBanner").src = adImages[thisAd];

　　rotate();
}

function rotate() {
　　thisAd++;
　　if (thisAd == adImages.length) {
　　　　thisAd = 0;
　　}
　　document.getElementById("adBanner").src = adImages[thisAd];

　　setTimeout(rotate, 3 * 1000);
}

系列：web

该系列自动来自分类： web

2017-10-22 css 扩散列表
2017-10-19 JavaScript获取浏览器使用的语言
2017-10-17 两个练习
2017-10-13 css RWD
2017-10-12 css 图片
2017-10-11 css 提示
2017-10-10 css 下拉
2017-10-08 css 表单
2017-10-07 css 导航栏
2017-10-06 css 单词
2017-10-03 HTML SVG
2017-10-02 HTML Canvas
2017-10-01 HTML 媒体
2017-09-17 HTML input
2017-09-16 HTML 结构
2017-09-07 学习JavaScript笔记「4」 (当前)
2017-09-05 学习JavaScript笔记「3」
2017-08-26 学习JavaScript笔记「2」
2017-08-25 学习JavaScript笔记「1」
2017-07-03 微信小程序开发日志「4」
2017-07-02 微信小程序开发日志「3」
2017-07-01 微信小程序开发日志「2」
2017-06-30 微信小程序开发日志「1」

下一篇推荐

系列继续阅读

学习JavaScript笔记「3」

图像