当前位置：首页 > jquery

jquery 相册

2026-02-03 11:36:01jquery

jQuery 相册实现方法

基础结构

使用HTML创建相册的基本结构，包含图片容器和导航按钮。

<div class="gallery">
    <img src="image1.jpg" class="active">
    <img src="image2.jpg">
    <img src="image3.jpg">
    <button class="prev">Previous</button>
    <button class="next">Next</button>
</div>

CSS样式

添加基础样式使相册更美观，隐藏非活动图片。

.gallery img {
    display: none;
    width: 500px;
    height: 300px;
}
.gallery img.active {
    display: block;
}

jQuery功能实现

使用jQuery控制图片切换，实现相册功能。

$(document).ready(function(){
    $(".next").click(function(){
        var current = $(".gallery img.active");
        var next = current.next("img");
        if(next.length){
            current.removeClass("active");
            next.addClass("active");
        }
    });
    $(".prev").click(function(){
        var current = $(".gallery img.active");
        var prev = current.prev("img");
        if(prev.length){
            current.removeClass("active");
            prev.addClass("active");
        }
    });
});

自动轮播

添加自动轮播功能，增强用户体验。

function autoPlay(){
    setInterval(function(){
        $(".next").click();
    }, 3000);
}
autoPlay();

缩略图功能

扩展相册功能，添加缩略图支持。

<div class="thumbnails">
    <img src="image1_thumb.jpg" data-target="image1.jpg">
    <img src="image2_thumb.jpg" data-target="image2.jpg">
</div>

$(".thumbnails img").click(function(){
    var target = $(this).data("target");
    $(".gallery img").removeClass("active");
    $(".gallery img[src='" + target + "']").addClass("active");
});

动画效果

为图片切换添加淡入淡出效果。

$(".next, .prev").click(function(){
    var current = $(".gallery img.active");
    current.fadeOut(500, function(){
        $(this).removeClass("active");
        var next = current.next("img").length ? current.next("img") : $(".gallery img").first();
        next.addClass("active").fadeIn(500);
    });
});

响应式设计

确保相册在不同设备上正常显示。

@media (max-width: 600px) {
    .gallery img {
        width: 100%;
        height: auto;
    }
}

图片预加载

提升用户体验，避免图片加载延迟。

jquery 相册

function preloadImages(images) {
    $(images).each(function(){
        $("<img/>")[0].src = this;
    });
}
preloadImages(["image1.jpg", "image2.jpg", "image3.jpg"]);

这些方法提供了完整的jQuery相册实现方案，可根据实际需求进行组合或扩展。