当前位置：首页 > jquery

jquery图片切换

2026-04-08 01:37:23jquery

jQuery 图片切换实现方法

基础图片轮播

通过简单的 fadeIn() 和 fadeOut() 方法实现淡入淡出效果：

let currentIndex = 0;
const images = $('.slider img');
const totalImages = images.length;

function changeImage() {
    images.eq(currentIndex).fadeOut(500);
    currentIndex = (currentIndex + 1) % totalImages;
    images.eq(currentIndex).fadeIn(500);
}

setInterval(changeImage, 3000);

带控制按钮的切换

添加前进/后退按钮控制：

jquery图片切换

$('#next').click(function() {
    $('.active').removeClass('active').next().addClass('active');
    if (!$('.active').length) {
        $('.slider img').first().addClass('active');
    }
});

$('#prev').click(function() {
    $('.active').removeClass('active').prev().addClass('active');
    if (!$('.active').length) {
        $('.slider img').last().addClass('active');
    }
});

缩略图导航

点击缩略图切换主图：

jquery图片切换

$('.thumbnail').click(function() {
    const newSrc = $(this).attr('src');
    $('#main-image').attr('src', newSrc);
});

滑动切换效果

使用 animate() 实现水平滑动：

$('#slider-container').animate(
    {left: '-=200px'},
    600,
    function() {
        $(this).css('left', '0').append($('img:first'));
    }
);

自动/手动切换模式

添加暂停/播放控制：

let autoPlay = setInterval(changeSlide, 3000);

$('#pause').click(function() {
    clearInterval(autoPlay);
});

$('#play').click(function() {
    autoPlay = setInterval(changeSlide, 3000);
});

注意事项

确保在文档加载完成后执行脚本：$(document).ready(function() {...});
为图片容器设置固定尺寸避免布局抖动
考虑添加预加载机制提升用户体验
移动端需添加触摸事件支持

完整示例结构

<div class="slider">
    <img src="1.jpg" class="active">
    <img src="2.jpg">
    <img src="3.jpg">
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>