jquery 幻灯片

以下是实现 jQuery 幻灯片的几种常见方法，涵盖基础轮播、自动播放和响应式设计：

基础幻灯片结构

HTML 部分需包含容器和幻灯片项：

<div class="slideshow">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>

CSS 确保幻灯片隐藏非活动项：

.slide { display: none; }
.slide:first-child { display: block; }

手动切换幻灯片

通过 jQuery 控制显示/隐藏：

$('.next').click(function() {
  $('.slide:visible').hide().next('.slide').show();
  if ($('.slide:visible').length === 0) {
    $('.slide:first').show();
  }
});

自动轮播效果

使用 setInterval 实现定时切换：

function autoSlide() {
  $('.slide:visible').fadeOut(500).next('.slide').fadeIn(500);
  if ($('.slide:visible').length === 0) {
    $('.slide:first').fadeIn(500);
  }
}
setInterval(autoSlide, 3000);

响应式调整

监听窗口大小变化时重置幻灯片尺寸：

$(window).resize(function() {
  $('.slide').width($(window).width() * 0.8);
});

插件推荐（可选）

如需更复杂功能，可考虑以下插件：

• Slick：$('.slideshow').slick({ autoplay: true });
• FlexSlider：支持触摸滑动和动画配置

关键点：确保在 DOM 加载完成后执行脚本（$(document).ready()），并通过 CSS 过渡效果提升视觉流畅性。