0

我正在尝试创建简单的幻灯片，如果我单击图像，它将变成下一个图像。到目前为止，我在一个名为 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 I'我不确定为什么它无法替换整个源代码，而是似乎只是在末尾附加了源名称的副本......

提前感谢您的帮助！

4

1 回答 1

2

我会做类似的事情：

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().

于 2012-07-16T01:33:26.783 回答