Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/468.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 遍历表并更改一张图片&;一次一个标题_Javascript_Html - Fatal编程技术网

Javascript 遍历表并更改一张图片&;一次一个标题

Javascript 遍历表并更改一张图片&;一次一个标题,javascript,html,Javascript,Html,我一直在乱搞代码,一次只修改一张图片和标题。 之后,它将等待几秒钟,然后更改下一张图片,依此类推 编辑:我重新编辑了解决方案,因为(pic+1)不起作用。程序更改第一个图像,然后当它更改下一个图像时,会抛出一个错误 然后调试器进入internet explorer 有没有办法将4个if语句的逻辑组合成一个可能的块?例如,如果iter为1,它将选择相同的代码,但目标为pic1和link1 <!DOCTYPE html> <html> <head> &

我一直在乱搞代码,一次只修改一张图片和标题。 之后,它将等待几秒钟,然后更改下一张图片,依此类推

编辑:我重新编辑了解决方案,因为(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>
'''

//图片数组
var pics=新数组(“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”);
//标签数组
var标签=新阵列(“多莉的玩具屋”、“奥斯汀的零碎物品”、“TJ的三明治店”、“乔伊的收藏海报”、“汤姆的垃圾箱”、“宝藏瓶”,
“陶器容器”、“保罗的陶器”、“凯利的咖啡收藏品”、“巴里的瓶子”、“贝琳达的珠子”、“星期六晚上跳蚤店!”、“托利的T恤”,
“TJ的顾客”、“Polly的照片”、“Dolly的洋娃娃屋”、“Carl的收藏帽”、“Central的后院场景”、“Callie的外套”、“TJ的咖啡”,
“詹妮弗的垃圾东西”、“我的秘密跳蚤市场”、“跳蚤的前院”、“老9号”、“杰基垃圾店”、“瓜瓜”、“哈莉的手袋”,
“跳蚤店的快乐赞助人!”、“UCA学生为我们加油!”、“跳蚤市场的开拓”、“年轻赞助人”、“美洲土著商品”、“比利的乐器”,
“托利的工具”、“玛丽的商店”、“糖果地游戏和玩具”);
//用于同时更改所有4个的旧值
var c=0;
var-iter=0;
var x;
变量y;
//时间
var定时器=0;
函数setPics(){
//设置图片
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];
//设置标签
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=标签[c+3];
//将数组移到5
c=5;
定时器=设置超时(“changePic()”,4000);
}
函数changePic(){
如果(c>=36){
c=0;
setPics();
}
//变更要素1
如果(iter==0){
x=document.getElementById(“pic0”).src=pics[c];
y=document.getElementById(“link0”).innerHTML=labels[c];
}
//变更要素2
如果(iter==1){
x=document.getElementById(“pic1”).src=pics[c];
y=document.getElementById(“link1”).innerHTML=labels[c];
}
//改变要素3
如果(iter==2){
x=document.getElementById(“pic2”).src=pics[c];
y=document.getElementById(“link2”).innerHTML=labels[c];
}
//改变要素4
如果(iter==3){
x=document.getElementById(“pic3”).src=pics[c];
y=document.getElementById(“link3”).innerHTML=labels[c];
}
//重新启动到元素1
如果(国际热核实验堆>=3){
iter=0;
}
C++;
iter++;
定时器=设置超时(“changePic()”,4000);
}

多莉玩具屋
奥斯汀零碎
TJ三明治
乔伊收藏海报 '''
您不必遍历/引用表中的行或单元格。只需参考图像和标题的ID,因为在您的案例中ID是编号的:

for (var i = 0, i < pics.length; i++) {
    document.getElementById("pic" + i).src = pics[i];
    document.getElementById("link" + i).innerHTML = labels[i];    
}
for(变量i=0,i
您不必遍历/引用表中的行或单元格。只需参考图像和标题的ID,因为在您的案例中ID是编号的:

for (var i = 0, i < pics.length; i++) {
    document.getElementById("pic" + i).src = pics[i];
    document.getElementById("link" + i).innerHTML = labels[i];    
}
for(变量i=0,i
您的
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
循环没有一个条件语句,其中