Question

我有一张3个单元格的表格，黑色图像中的middel 1，所以看起来屏幕中间有一条线。现在在另一个单元格中我想要显示图片，所以我尝试做一个循环，通过隐藏单元格然后显示它们来每秒更改图像。

脚本：

$(window).ready(function () {

//the images sits in a div with a hidden property.
var AlumniumPictures = $("#AlumnimPictureHolder").children();
var ShipozimPictures = $("#ShipozimPictureHolder").children();

//var timer = $.timer(yourfunction, 10000);

for (var i = 0; i < 10; i++) {


    $(".almoniyomButtonTD").css({
        "background-image": "url(" + $(AlumniumPictures[i]).attr('src') + ")"
    });

    $(".shipozimButtonTD").css({
        "background-image": "url(" + $(ShipozimPictures[i]).attr('src') + ")"
    });

    $(".almoniyomButtonTD").hide();
    $(".shipozimButtonTD").hide();


    $(".almoniyomButtonTD").show(1100);
    $(".shipozimButtonTD").show(1100);

   //for some reson the code dosnt work if im not using the setInterval method.
   document.setInterval(1000);


}

}）;

这不行，它只显示我的第一张图片然后停止。这有什么打击方法吗？我是这样做的吗？

Answer 1

我认为您可以为background：

执行此操作

$(window).ready(function () {
    //the images sits in a div with a hidden property.
    var AlumniumPictures = $("#AlumnimPictureHolder").children();
    var ShipozimPictures = $("#ShipozimPictureHolder").children();

    //var timer = $.timer(yourfunction, 10000);

    time = 0;
    step = 1000; // One secund
    for (var i = 0; i < 10; i++) {
        time+= step;
        $(".almoniyomButtonTD").hide();
        $(".shipozimButtonTD").hide();

        $(".almoniyomButtonTD").show(1100);
        $(".shipozimButtonTD").show(1100);

        //for some reson the code dosnt work if im not using the setInterval method.
        document.setInterval("changeBG('" + $(AlumniumPictures[i]).attr('src') + "', '.almoniyomButtonTD')", time);
        document.setInterval("changeBG('" + $(AlumniumPictures[i]).attr('src') + "', '.shipozimButtonTD')", time);
    }
});

function changeBG(image, obj) {
    $(obj).css({
        "background-image": "url(" + image + ")"
    });
}

但我不明白你想做什么：

$(".almoniyomButtonTD").hide();
$(".shipozimButtonTD").hide();

$(".almoniyomButtonTD").show(1100);
$(".shipozimButtonTD").show(1100);

Answer 2

查看有关setInterval的文档。您需要告诉它您正在运行的代码。

window.setInterval(code, delay);

您没有指定任何代码来运行它！尝试将for语句放在函数中并调用它。

另外，从Mozilla和MS docs中，setInterval似乎是在窗口对象上，而不是在文档对象上。我认为它不会像你拥有的那样运作。我想如果你查看调试器，你会看到一个错误抛出。

window.setInterval(myFunction, 1000);

function myFunction() {
 for (var i = 0; i < 10; i++) {
   $(".almoniyomButtonTD").css({
     "background-image": "url(" + $(AlumniumPictures[i]).attr('src') + ")"
   });

   $(".shipozimButtonTD").css({
     "background-image": "url(" + $(ShipozimPictures[i]).attr('src') + ")"
   });

   $(".almoniyomButtonTD").hide();
   $(".shipozimButtonTD").hide();

   $(".almoniyomButtonTD").show(1100);
   $(".shipozimButtonTD").show(1100);
 }
}

用for循环改变背景图像

2 个答案: