我一直在搞乱代码,一次只能更改一张图片和标题。
之后,它将等待几秒钟,然后更改下一张图片,依此类推。
编辑:由于(pic + 1)不起作用,我重做了解决方案。该程序将更改第一张图像,然后在更改下一张图像时将引发错误。
然后调试器进入Internet Explorer
有没有办法将4个if语句的逻辑组合成一个可能的块?例如,如果iter为1,它将选择相同的代码,但目标为pic1&link1。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//array for pictures
var pics = new Array("images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg",
"images/7.jpg", "images/8.jpg", "images/9.jpg", "images/10.jpg", "images/11.jpg", "images/12.jpg", "images/13.jpg",
"images/14.jpg", "images/15.jpg", "images/16.jpg", "images/17.jpg", "images/18.jpg", "images/19.jpg", "images/20.jpg",
"images/21.JPG", "images/22.jpg", "images/23.jpg", "images/24.jpg", "images/25.jpg", "images/27.jpg", "images/28.jpg",
"images/29.jpg", "images/30.jpg", "images/31.jpg", "images/32.jpg", "images/33.jpg", "images/34.jpg", "images/35.jpg",
"images/36.jpg");
//Array for labels
var labels = new Array("Dolly's Doll House", "Austin's Odds & Ends", "TJ's Sandwich Shoppe ", "Joey's Collectable Posters ", "Tom's Junk Trunk", "Treasure's Bottles",
"Earthenware Containers", "Paul's Pottery", "Kelly's Coffee Collectables", "Barry's Bottles", "Belinda's Beads", "Saturday Nite at the Flea!", "Tollie's T-Shirts",
"TJ's Patrons", "Polly's Pictures", "Dolly's Doll House", "Carl's Collectable Caps", "Central's Backyard Scene", "Callie's Coats", "Coffee at TJ's!",
"Jennifer's Junk Stuff", "My Secret Flea Market", "Flea's Front Yard", "Old No. 9", "Jackies Junk Shoppe", "Quapaw Gourds", "Hallie's Handbags",
"Happy Patrons at the Flea!", "UCA Students Cheer Us!", "Opening Up the Flea Market", "Young Patron", "Native American Wares", "Billy's Musical Instruments",
"Tollie's Tools", "Marie's Shop", "Candy Land Games and Toys");
// old value for changing all 4 at the same time
var c = 0;
var iter = 0;
var x;
var y;
//time
var timer = 0;
function setPics() {
//Set pic
x = document.getElementById("pic0").src = pics[c];
//document.getElementById("pic1").src = pics[c + 1];
//document.getElementById("pic2").src = pics[c + 2];
//document.getElementById("pic3").src = pics[c + 3];
//Set labels
y = document.getElementById("link0").innerHTML = labels[c];
//document.getElementById("link1").innerHTML = labels[c + 1];
//document.getElementById("link2").innerHTML = labels[c + 2];
//document.getElementById("link3").innerHTML = labels[c + 3];
// shift array to 5
c = 5;
timer = setTimeout("changePic()", 4000);
}
function changePic() {
if (c >= 36) {
c = 0;
setPics();
}
// change element 1
if (iter == 0) {
x = document.getElementById("pic0").src = pics[c];
y = document.getElementById("link0").innerHTML = labels[c];
}
// change element 2
if (iter == 1) {
x = document.getElementById("pic1").src = pics[c];
y = document.getElementById("link1").innerHTML = labels[c];
}
// change element 3
if (iter == 2) {
x = document.getElementById("pic2").src = pics[c];
y = document.getElementById("link2").innerHTML = labels[c];
}
// change element 4
if (iter == 3) {
x = document.getElementById("pic3").src = pics[c];
y = document.getElementById("link3").innerHTML = labels[c];
}
// restart to element 1
if (iter >= 3) {
iter = 0;
}
c++;
iter++;
timer = setTimeout("changePic()", 4000);
}
</script>
</head>
<body onLoad="setPics()">
<table class="items" align="center" width="10%" border="0px" cellpadding="0">
<tr>
<td align="left">
<img src="images/1.jpg" id="pic0" border="0"/>
<br />
<span class="imgTitle" id ="link0">Dolly's Doll House</span>
</td>
<td align="left">
<img src="images/2.jpg" id="pic2" border="0"/>
<br />
<span class="imgTitle" id="link2">Austins Odds and Ends</span>
</td>
</tr>
<tr>
<td align="left">
<img src="images/3.jpg" id="pic3" />
<br />
<span class="imgTitle" id="link3">TJ's Sandwich </span>
</td>
<td align="left">
<img src="images/4.jpg" id="pic4" />
<br />
<span class="imgTitle" id="link4">Joey's Collectible Posters</span>
</td>
</tr>
</table>
</body>
</html>
'''
最佳答案
您的for
循环没有条件语句,该语句在其中评估为继续。在第一个循环中检查i
变量是否小于table.rows.length
属性,在第二个循环中检查j
小于row.cells.length
属性。
for (var i = 0, row; i < table.rows.length; i++) {
row = table.rows[i];
for (var j = 0, col; j < row.cells.length ; j++) {
col = row.cells[j]
document.getElementbyId("pic" + i).src = pics[i][j];
document.getElementById("link" + i).innerHTML = labels[i][j];
}
}
或者使用更现代的
for...of
循环,使遍历HTMLCollection
和table.rows
的row.cells
对象的复杂性降低。for (let row of table.rows) {
for (let cell of row.cells) {
...
}
}