jQuery图像切换器

如果您想在图像转换中使用精美的效果，则可以使用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);
    });
});

使用JQuery编写此代码的好处是，您不会陷入图像淡入或淡出的麻烦。这是完全可以使用slideUp()和slideDown()甚至animate()改变其中一个图像为其他改变了。

要运行此代码，只需将其与核心JQuery库一起包含在您的页面中即可。页面上存在任何包含slideshow类的div，然后只要它们包含图像，它们就会转换为图像交换器。