jQuery带描述和小图的图片画廊(jQuery图片卷轴效果)

jQuery带描述和小图的图片画廊(jQuery图片卷轴效果)

以下是一个使用jQuery实现带描述和小图的图片画廊的示例代码：

HTML代码：

<div class="gallery">
  <div class="main-image">
    <img src="image1.jpg" alt="Image 1">
    <div class="description">Description 1</div>
  </div>
  <div class="thumbnail-images">
    <img src="image1.jpg" alt="Image 1" class="thumbnail active">
    <img src="image2.jpg" alt="Image 2" class="thumbnail">
    <img src="image3.jpg" alt="Image 3" class="thumbnail">
  </div></div>

CSS代码：

.gallery {  display: flex;  justify-content: center;  align-items: center;
}.main-image {  position: relative;  width: 400px;  height: 300px;
}.main-image img {  width: 100%;  height: 100%;
}.description {  position: absolute;  bottom: 0;  left: 0;  width: 100%;  background-color: rgba(0, 0, 0, 0.5);  color: #fff;  padding: 10px;
}.thumbnail-images {  display: flex;  justify-content: center;  align-items: center;  margin-top: 20px;
}.thumbnail {  width: 80px;  height: 60px;  margin: 0 10px;  cursor: pointer;  opacity: 0.5;
}.thumbnail.active {  opacity: 1;
}

jQuery代码：

$(document).ready(function() {
  $('.thumbnail').on('click', function() {
    $('.thumbnail').removeClass('active');
    $(this).addClass('active');    var imageSrc = $(this).attr('src');    var imageAlt = $(this).attr('alt');    var description = $(this).siblings('.description').text();
    $('.main-image img').attr('src', imageSrc);
    $('.main-image img').attr('alt', imageAlt);
    $('.description').text(description);
  });
});

这个示例中，我们创建了一个带描述和小图的图片画廊。点击小图时，我们使用jQuery监听点击事件，并根据被点击的小图，更新主图和描述的内容。通过添加和移除active类，我们可以实现高亮显示当前选中的小图。

jQuery实现的这款图片画廊相册效果，点击小图轮换图片，同时改变图片描述。
jQuery图片卷轴效果，jquery雷达信号探测器特效，jQuery图片分割显示内容，jQuery导航菜单背景切换特效，