1

我有一些图像,当我单击上一个/下一个链接时,我将它们加载到特定的 div 中。图像循环。当我单击上一个或下一个按钮时,JS 会更改图像的来源,并加载下一个。该代码有效。

现在我的问题。我想在每个新图像完全加载时淡入淡出,以获得更好的效果,但我无法让它工作。我从各种来源汇总的代码仅适用于第一张图像。

我真的希望代码简单,因为我对 Jquery 的了解非常基础。我搜索了该站点,发现了很多类似的问题和解决方案,但没有一个对我有用。

添加于 10 月 10 日。2012: @jbabey 对我的基本问题给出了一个很好的答案(见下文),但随后又出现了另一个问题。当我单击 nex/prev 按钮并且新图像正在等待加载(并淡入)时,图像的容器会缩小。我知道这是因为新图像在完全加载之前是隐藏的。但是有没有办法改变 JS,它“记住”第一个加载图像的容器高度(在页面加载时加载的基本图像)。因此,当我单击 prev/next 时,图像的容器会保留前一个图像的高度。由于页面设计,我无法设置容器的高度。

任何帮助,将不胜感激。

原来的功能:

// Next image on button (and image) click
$('#swapnextimg,#imgId').click( function() {
    curIdx = (curIdx+1) % max;
    $("#imgId").attr('src', imgSrcBase+images[curIdx]+'.jpg');
});

// Prev image on button click
$('#swapprevsimg').click( function() {
    curIdx = (curIdx+max-1) % max;
    $("#imgId").attr('src', imgSrcBase+images[curIdx]+'.jpg');
});

完整示例:http: //jsfiddle.net/S_Ajd/6vHSb/

@jbabey 的代码:http: //jsfiddle.net/jbabey/6vHSb/28/

4

1 回答 1

1

只需将您编写的用于淡入第一张图像的代码放入前一个和下一个按钮的单击处理程序中即可。

// Next image on button (and image) click
$('#swapnextimg,#imgId').click( function() {
    curIdx = (curIdx+1) % max;
    $("#imgId").hide().attr('src', imgSrcBase+images[curIdx]+'.jpg')
    .load(function () {
        $(this).fadeIn(1000);
    });
});

// Prev image on button click
$('#swapprevsimg').click( function() {
    curIdx = (curIdx+max-1) % max;
    $("#imgId").hide().attr('src', imgSrcBase+images[curIdx]+'.jpg')
    .load(function () {
        $(this).fadeIn(1000);
    });
});

http://jsfiddle.net/jbabey/6vHSb/28/

于 2012-10-09T13:41:01.293 回答