Question

我是javascript和jquery的初学者，我在html中有11个图像标签。我想要基本上使用js和jquery更改这些标记的来源。这段代码不起作用，我在firebug中没有收到任何错误，有人可以告诉我我在哪里做错了吗？

var imagesArray2=["01.png","02.png","03.png","04.png","05.png","06.png","07.png","08.png","09.png","10.png","11.png"];
var elementArray2 = ["#img1","#img2","#img3","#img4","#img5","#img6","#img7","#img8","#img9","#img10","#img11"];
var imagesArray,elementArray;
var elementInArray;

准备好文件

$(function(){
setInterval(Myfunction(),1000);});

我的功能代码有一个基于elementsInArray变量值的循环，它调用imageFadeAnimations函数

function Myfunction(){
    if(elementsInArray === 0){
       imagesArray = imagesArray2;
       elementArray = elementArray2;
       elementsInArray = elementArray.length;
       var imageChanges = Math.floor(Math.random()*elementsInArray);
       imageFadeAnimations(imageChanges);
    }
    else
    {
        elementsInArray=elementArray.length;
        imageChanges = Math.floor(Math.random()*elementsInArray);
        imageFadeAnimations(imageChanges);
    }
}

以整数作为参数

function imageFadeAnimations(imageChanges){
    for(var k = 0;k<imageChanges;k++){
        var element = Math.floor(Math.random()*elementsinArray);
        var image=Math.floor(Math.random()*elementsinArray);
        imageChanger(elementArray[element],imageArray[image]);
        elementArray.splice(element,1);
        imagesArray.splice(image,1);
    }
}
function imageChanger(b1,b2){
    $(b1).fadeOut(500,function(){
        $(b1).attr("src",b2);
        $(b1).fadeIn(500);
    });
}

Answer 1

你正在从jQuery可以变得非常简单的事情中制造恶劣天气。

首先使用id="imageContainer"将图像包装在元素（通常是div或span）中。

现在，如果我理解正确，您的代码将简化为：

$(function() {
    var imagesArray = ["01.png", "02.png", "03.png", "04.png", "05.png", "06.png", "07.png", "08.png", "09.png", "10.png", "11.png"],
        $images = $("img", "#imageContainer");

    setInterval(function() {
        $images.each(function() {
            var $img = $(this),
                i = Math.min(imagesArray.length-1, Math.floor(Math.random() * imagesArray.length));
            $img.fadeOut().promise().then(function() {
                $img.attr("src", imagesArray[i]).fadeIn(500);
            });
        });
    }, 1000);
});

编辑1

正如@mplungjan在下面指出的那样......

如果使用src属性初始化img节点，则可以通过从DOM中获取srcs来组成imagesArray，如下所示（替换上面的两行）：

    var $images = $("img", "#imageContainer"),
        imagesArray = $images.map(function() { return this.src; }).get();

Answer 2

我相信这个jquery / zepto代码不是更小，但更容易理解：

function changeImg(){ 
$("#img1").attr('src', '01.png');
$("#img2").attr('src', '02.png');       
$("#img3").attr('src', '03.png');
$("#img4").attr('src', '04.png');
$("#img5").attr('src', '05.png');       
$("#img6").attr('src', '06.png');                           
};

使用jquery更改多个图像源（以及其他一些内容）

2 个答案: