Question

<script type="text/javascript">
var currPic = 1;
var totPics = 3;
var keepTime;

function setupPicChange() {
    keepTime = setTimeout("changePic()", 5000);
}

function changePic() {
    currPic++;
    if (currPic > totPics) currPic = 1;
    document.getElementById("picture1").src = "advert" + currPic + ".jpg";
    setupPicChange();
}
</script>

你好这是我的脚本，让你的图像在5秒后改变三次，它完美地运作，但是有人可以用非常简单的术语告诉我如何使这适用于9个不同的图像，所有图像都改变3次，在同一时间，但不同的图像？

例如广告1，将更改为广告2，然后广告3 ................ 在它下面.................广告4将改为广告5，然后广告6 ................ .......................广告7将改为广告8，然后改为广告9 .........直到广告27.它们实际上不是广告，这只是我需要知道的一个很好的例子。

再次感谢大家!!!!

Answer 1

您应该考虑抽象出当前用于应用于一组图像的逻辑。这是一个例子：

<script type="text/javascript">
var rotators = [
    { id: 'picture1', images: ['pic1.jpg', 'pic2.jpg', 'pic3.jpg'], selectedIndex: 0 },
    { id: 'picture2', images: ['pic4.jpg', 'pic5.jpg', 'pic6.jpg'], selectedIndex: 0 },
    { id: 'picture3', images: ['pic7.jpg', 'pic8.jpg', 'pic9.jpg'], selectedIndex: 0 }
];

var updateImages = function() {
    for (var i=0; i < rotators.length; i++) {
        var rotator = rotators[i];
        rotator.selectedIndex++;
        if (rotator.selectedIndex >= rotator.images.length) {
            rotator.selectedIndex = 0;
        }
        document.getElementById(rotator.id).src = rotator.images[rotator.selectedIndex];
    }
};
var timer = setInterval(updateImages, 5000);
</script>

这使得您当前正在操作的组件（要更改的图像的ID，要旋转的图像以及这些图像中的当前位置）放置在数组中的对象的属性。然后执行更新的函数（比如你的changePic方法）可以遍历数组中的所有这些对象，并使用相同的逻辑来更新每个对象。

我还将setTimeout调用更改为setInterval，它将每隔X ms调用一次提供的函数，而不是只调用一次然后重置计时器。

如何在3个图像之间每5秒切换一次的同一页面上创建9个图像。我可以做一个但不能做多个

1 个答案: