jQuery图像切换器

Z时代
2024-01-10
分类：综合

如果您想在图像转换中使用精美的效果，则可以使用CrossSlide之类的方法，但是对于更简单的效果，您可以使用单个函数将一个图像替换为另一个。首先，让我们创建一些简单的标记，使我们可以显示一些图像。

<div>
<img xx_src="image1.png" alt="Image 1" />
<img xx_src="image2.png" alt="Image 2" />
<img xx_src="image3.png" alt="Image 3" />
<img xx_src="image4.png" alt="Image 4" />
</div>

当我创建此脚本时，其中一项要求是在不破坏页面其余部分布局的情况下添加不同大小的图像。因此，我还添加了一些代码来收集所有图像的高度和宽度，并将最大值用作包含div的高度和宽度。以下小片段用于使用表示法获取数组的最大值。array.max()

Array.prototype.max = function() {
    return Math.max.apply(null, this);
};

创建图像幻灯片的代码非常简单。此处发生的情况是，发现页面上具有幻灯片放映类的div的每个实例都已在其上及其内容上运行了一些设置例程。设置包括设置初始图像和最终图像，为图像设置一些默认样式，然后找出div中图像的最大高度和宽度。图像的最大高度和宽度用于设置包含div的高度和宽度。然后创建一个函数，该函数将用于交换图像并setTimeout()添加一个调用，以便可以创建一个间隔。该advanceSlideshow()功能只是将当前选择的图像与列表中的下一个图像交换。该间隔当前设置为5000，这意味着图像每5秒钟就会从一幅淡入淡出到下一幅。

$(document).ready(function(){
    $("div.slideshow").each(function()
    {
        var slideshow = $(this);
        var selectedImage = 0;
        var maxSelectedImage = slideshow.find("img").length - 1;
 
        slideshow.css("position", "relative");
 
        slideshow.find("img")
                .css("position", "absolute")
                .css("top", 0)
                .css("left", 0)
                .hide();
 
        slideshow.find("img:eq("+selectedImage+")").show();
 
        var height = new Array();
        var width = new Array();
        slideshow.find("img").each(function(i){
            var currentImg = $(this);
            height[i] = currentImg.height();
            width[i] = currentImg.width();
            i++;
        });
 
        slideshow.css('height', height.max());
        slideshow.css('width', width.max());
 
        var advanceSlideshow = function()
        {
            var newSelectedImage = selectedImage + 1;
            if(newSelectedImage > maxSelectedImage)
                newSelectedImage = 0;
 
            slideshow.find("img:eq("+selectedImage+")").fadeOut();
            slideshow.find("img:eq("+newSelectedImage+")").fadeIn();
 
            selectedImage = newSelectedImage;
 
            setTimeout(advanceSlideshow, 5000);
        };
        setTimeout(advanceSlideshow, 5000);
    });
});