jQuery带小图全屏幻灯片展示(jQuery自适应图片画廊插件源码下载)

jQuery带小图全屏幻灯片展示(jQuery自适应图片画廊插件源码下载)
jquery全屏 全屏幻灯片 带小图幻灯片 图片切换 jquery特效 jquery下载
jQuery自适应图片画廊插件，jQuery+CSS3实现3D全屏图片切换动画，CSS3悬停快速幻灯片，jQuery带小图全屏幻灯片展示，

展示图片的全屏幻灯片效果时，可以使用以下代码作为基础：

HTML结构：

<div class="slideshow-container">
  <div class="slideshow">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <div class="thumbnail-container">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

CSS样式：

.slideshow-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.slideshow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.slideshow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail-container {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.thumbnail-container img {
  width: 50px;
  height: 50px;
  margin: 0 10px;
  cursor: pointer;
}

.thumbnail-container img.active {
  border: 2px solid red;
}

jQuery代码：

$(document).ready(function() {
  // 初始化幻灯片
  $('.slideshow').children().first().addClass('active');
  $('.thumbnail-container').children().first().addClass('active');

  // 点击缩略图切换幻灯片
  $('.thumbnail-container img').click(function() {
    var index = $(this).index();
    $('.slideshow img').removeClass('active').eq(index).addClass('active');
    $('.thumbnail-container img').removeClass('active').eq(index).addClass('active');
  });
});