Question

我正在尝试制作简单的幻灯片，如果我单击图像，它将变成下一张图像。到目前为止，我在子文件夹中有四个图像，名为1-4（例如：1.jpg，2.jpg，3.jpg，4.jpg）。我已经设置了一个计数器（变量imgcounter），如果它大于4，它将重置为1，我使用这个计数器轻松更改img元素的src名称。

简单版本：

$(document).ready(function() {
var imgcounter = 1; 
$('#slide img').each(function() {
    $(this).click(function() {
        if(imgcounter <= 4 ) {
            imgcounter++;
            $(this).attr('src', 'images/' + imgcounter + '.JPG');
        } // end if
        else {
            var imgcounter = 1;
            $(this).attr('src', 'images/' + imgcounter + '.JPG');
        } // end else
    }); // end click    
}); // end each
});  // end ready

在此版本中，如果单击它，图像甚至不会改变。

我也尝试过这个更复杂的方法，我在其中放置一个变量来定义我想要替换源的内容。我不确定我是否正确使用了replace（）函数，尤其是在我使用双撇号''表示我想要替换整个src的部分。我也不确定我是否合法地写出了replace（）函数的第二部分 - 'images /'+ imgcounter +'.JPG'。

$(document).ready(function() {
var imgcounter = 1; 
$('#slide img').each(function() {
    var imgFile = $(this).attr('src');
    var preloadImg = new Image();
    $(this).click(function() {
        if(imgcounter <= 4 ) {
            imgcounter++;
            preloadImg.src = imgFile.replace('', 'images/' + imgcounter + '.JPG');
            $(this).attr('src', preloadImg.src);
        } // end if
        else {
            var imgcounter = 1;
            preloadImg.src = imgFile.replace('', 'images/' + imgcounter + '.JPG');
            $(this).attr('src', preloadImg.src);
        } // end else
    }); // end click    
}); // end each
});  // end ready

在此版本中，图像已更改，但我得到一个损坏的图像符号，错误控制台显示：无法加载资源文件：/// ..（取出完整路径）../ images / 1.JPGimages / 1.JPG 我不确定为什么它没有替换整个源代码，而只是在最后附加源名称的副本......

提前感谢您的帮助！

Answer 1

我会做类似的事情：

var imgcounter = 1;

$("#slide img").click(function(e){
    if(imgcounter < 4){
        imgcounter++;
    }else{
        imgcounter = 1;
    }
    $(this).attr("src", "images/"+imgcounter+".jpg");
});

无论如何，它会将处理程序添加到img内的每个#slide，因此不需要each()函数，它看起来更清晰。此外，删除了对$(this).attr()的多余调用。

用/ jQuery替换img src属性不起作用

1 个答案: