Javascript 淡入淡出图像滑块

我试着让图像彼此淡入淡出。我不确定是否最好先预装图像。实际上，在下一幅图像中淡入淡出之前，淡入淡出的是完全白色的背景，但我希望它立即淡入淡出，而不是显示白色背景-如果这有意义的话：

$(document).ready(function () {
    var $next, 
        cycle;
    var i = 0;
    var imgArr = ['1.jpg', '2.jpg', '3.jpg'];

    $activeLi = $("#slideshow li");
    $activeLi.html('<img src="images/' + imgArr[i] + '" />');
    cycle = setInterval(change_img, 1000);

    function change_img(){
        clearInterval(cycle);
        $activeLi.find('img').fadeOut('slow', function(){
            $activeLi.html('<img src="images/' + imgArr[i] + '" />').fadeIn('slow');
        });

        i = (i == (imgArr.length - 1)) ? 0 : ++i;
        cycle = setInterval(change_img, 1000);
    }
});

$（文档）.ready（函数（）{
var$next，
周期
var i=0；
var imgArr=['1.jpg'，'2.jpg'，'3.jpg']；
$activeLi=$（“#幻灯片放映li”）；
$activeLi.html（“”）；
循环=设定间隔（变化量，1000）；
功能更改\u img（）{
清除间隔（周期）；
$activeLi.find（'img'）.fadeOut（'slow'，function（））{
$activeLi.html（“”）.fadeIn（'slow'）；
});
i=（i==（imgArr.length-1））？0:+i；
循环=设定间隔（变化量，1000）；
}
});

另外，在淡入之前对图像进行预渲染是否更好

我的解决方案（自从我开始提问后，我就厌倦了…）

$（文档）.ready（函数（）{
var$next，
周期
var i=0；
var-durTimer=2000；
var imgArr=['1.jpg'，'2.jpg'，'3.jpg'，'4.jpg']；
$activeLi=$（“#幻灯片放映li”）；
$activeLi.first（）.html（“”）；
周期=设定间隔（改变img，durTimer）；
功能更改\u img（）{
清除间隔（周期）；
变量nxtImg=（i==imgArr.length）？1:i；
$activeLi.last（）.html（“”）；
$activeLi.find（'img'）.animate（{opacity:0}，{duration:durTimer}）；
i=（i==（imgArr.length-1））？0:+i；
$activeLi.first（）.html（“”）；
周期=设定间隔（改变img，durTimer）；
}
});

如果图像数量有限，最好在页面加载时加载所有图像

在给定的示例中，您仅使用一个

img

标记，并在一段时间后将其源更改为另一个图像

因此，当图像淡出时，我们肯定可以看到白色背景。此外，加载新图像还需要一些时间

添加三个img标记（代码中有三个图像），而不是一个img标记

一次启动

fadeOut

和

fadeIn

动画

fadeOut

用于当前图像，而

fadeIn

用于下一图像

这不会显示任何白色背景

我已经为此创建了一个小演示

---

检查此项：

如果图像数量有限，最好在页面加载时加载所有图像

在给定的示例中，您仅使用一个

img

标记，并在一段时间后将其源更改为另一个图像

因此，当图像淡出时，我们肯定可以看到白色背景。此外，加载新图像还需要一些时间

添加三个img标记（代码中有三个图像），而不是一个img标记

一次启动

fadeOut

和

fadeIn

动画

fadeOut

用于当前图像，而

fadeIn

用于下一图像

这不会显示任何白色背景

我已经为此创建了一个小演示

---

看看这个：

我很乐意帮忙，你有JSFIDLE吗？它没有我想的图像，但它的要点就在那里。。。最好是预加载（除非你有很小的图像），因为第一个图像可以在其他图像下载时显示，在使用它们时，请求只需要验证304状态（未修改），这比下载要快得多。在第一次运行时，它会减慢您的淡入淡出/幻灯片放映速度，但可能意味着每张图片可以节省几秒钟的时间。为了避免空白，您可能希望将

fadeOut（）

和

fadeIn（）

重叠一部分运行时。所以您不希望它在下一个运行时之前完全消失？若使用.animate（）将不透明度降低到0.20左右，然后关闭图像，然后将.animate（）恢复到1.0不透明度，而不是淡出，会怎么样@Seano666我试着摆弄animate（），但无法让它正常工作，我会继续摆弄它。我很乐意帮忙，你有JSFIDLE吗？它没有我想的图像，但它的要点在那里。。。最好是预加载（除非你有很小的图像），因为第一个图像可以在其他图像下载时显示，在使用它们时，请求只需要验证304状态（未修改），这比下载要快得多。在第一次运行时，它会减慢您的淡入淡出/幻灯片放映速度，但可能意味着每张图片可以节省几秒钟的时间。为了避免空白，您可能希望将

fadeOut（）

和

fadeIn（）

重叠一部分运行时。所以您不希望它在下一个运行时之前完全消失？若使用.animate（）将不透明度降低到0.20左右，然后关闭图像，然后将.animate（）恢复到1.0不透明度，而不是淡出，会怎么样@Seano666我试着用animate（）来搞乱它，但无法正常工作，我会继续搞乱它。这个数组最终将是动态的，所以我必须用数组中的不同图像替换3个图像，而不是1个图像。不要替换任何图像。在页面加载本身上添加三个图像。但是，将它们设置为一对一地显示所有三个图像（给出一些位置）。然后你只需要淡出一个，淡出另一个。无需更改任何图像的

src

属性。数组最终将是动态的，因此我必须用数组中的不同图像替换3个图像，而不是1个图像。不要替换任何图像。在页面加载本身上添加三个图像。但是，将它们设置为一对一地显示所有三个图像（给出一些位置）。然后你只需要淡出一个，淡出另一个。无需更改任何图像的

src

属性。

$(document).ready(function () {
    var $next, 
        cycle;
    var i = 0;
    var durTimer = 2000;
    var imgArr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'];

    $activeLi = $("#slideshow li");
    $activeLi.first().html('<img src="images/' + imgArr[0] + '" />');
    cycle = setInterval(change_img, durTimer);

    function change_img(){
        clearInterval(cycle);
        var nxtImg = (i == imgArr.length) ? 1 : i;
        $activeLi.last().html('<img src="images/' + imgArr[nxtImg] + '" />');
        $activeLi.find('img').animate({opacity:0}, {duration: durTimer});   

        i = (i == (imgArr.length - 1)) ? 0 : ++i;
        $activeLi.first().html('<img src="images/' + imgArr[i] + '" />');
        cycle = setInterval(change_img, durTimer);
    }
});