Question

基本上，我有一个html文档，它有一些静态图像和图像我想在计时器上更改。我有那个工作，但旋转的图像转到html中的第一个<img>，这应该是静态的。如何指定更改图像的位置？

这就是我所拥有的，而且它有效 - 图像会改变，但不是我想要的。

<html>
<div id="staticImage">
    <img src="pic1">
</div>

<div id="changingImage">
    <img id="changePics">
</div>

</html>

//My javascript to rotate the images:

var imageArray = [];
var index = 0;`

function loadImages(){
    imageArray[0] = new Image();
    imageArray[0].src = "img/a.jpg";
    imageArray[1] = new Image();
    imageArray[1].src = "img/b.jpg";
    imageArray[2] = new Image();
    imageArray[2].src = "img/c.jpg";
    imageArray[3] = new Image();
    imageArray[3].src = "img/d.jpg";`

    document.images[0].src = imageArray[0].src;}

function rotateImage() {
    index ++
    if (index > 3) {
        index = 0}
    document.images[0].src = imageArray[index].src;}


//The javascript always lands in the "staticImage" `<div>`.

Answer 1

您的document.images[0].src将始终返回文档中的第一张图片。查看HTML部分，staticImage位于changingImage之前，因此，loadImages和rotateImage将始终更改DOM结构中的第一个图像。

一种方法是将元素ID传递给函数，函数可以从传递的ID中更改图像。

这是一个提示，可能会帮助您解决问题。 Simple way to get element by id within a div tag?

如果你无法理解，那就再回来。

Answer 2

您不需要使用JavaScript，这会影响浏览器和移动设备的性能，具体取决于您的受众群体，但您应该为这两者做好准备。最好的方法是通过图像使用CSS和轮播。基本上，您使用div创建overflow-x:hidden，然后每隔一秒左右从左到右循环移动图像。我提供了一个带有演示的howto供您试用。

howto with demo

使用javascript时，如何设置将改变图像的<div>？</div>

2 个答案: