You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

用户评价轮播实现自动滚动及标题描述同步展示技术求助

avatar
数据老陈
2026-10-5
用户评价轮播组件功能扩展实现

功能修改说明

  • 自动轮播：新增3秒间隔自动切换逻辑，鼠标移入轮播区域暂停自动播放，移出后恢复
  • 评价信息同步：每个轮播图绑定对应人员标题、评价描述，轮播切换时自动同步展示居中项的对应信息

完整修改代码

HTML代码 

<div class="container">
  <div class="row">
    <div class="col-md-12 col-sm-6">
      <div class="gallery">
        <div class="testimonial-bg"></div>
        <!-- 评价信息展示区域 -->
        <div class="testimonial-info">
          <h3 class="testimonial-title"></h3>
          <p class="testimonial-desc"></p>
        </div>
        <div class="gallery-container">
          <!-- 给每个图片新增title和desc自定义属性存储对应信息 -->
          <img class="gallery-item gallery-item-1" src="images/events/guest.jpg" data-index="1" data-title="用户张三" data-desc="这款产品超出我的预期，使用半年没有出现任何问题，客服响应也非常及时，推荐大家购买。">
          <img class="gallery-item gallery-item-2" src="images/events/guest.jpg" data-index="2" data-title="市场总监 李四" data-desc="我们公司全团队都在用这套系统，工作效率提升了至少30%，性价比非常高。">
          <img class="gallery-item gallery-item-3" src="images/events/guest.jpg" data-index="3" data-title="自由职业者 王五" data-desc="作为个人用户，这套工具的轻量化设计太符合我的需求了，上手零难度，功能完全够用。">
          <img class="gallery-item gallery-item-4" src="images/events/guest.jpg" data-index="4" data-title="技术负责人 赵六" data-desc="底层架构很稳定，二次开发也很友好，我们基于这套系统做了定制化改造，省了很多开发成本。">
          <img class="gallery-item gallery-item-5" src="images/events/guest.jpg" data-index="5" data-title="学生 孙七" data-desc="学生认证的优惠力度很大，功能对毕业设计的帮助非常大，感谢团队做了这么好的产品。">
        </div>
        <div class="gallery-controls"></div>
      </div>
    </div>
  </div>
</div>

CSS代码 

.gallery {
  width: 100%;
  position: relative;
}
/* 新增评价信息样式 */
.testimonial-info {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
  text-align: center;
}
.testimonial-title {
  font-size: 22px;
  color: #333;
  margin-bottom: 20px;
  min-height: 30px;
}
.testimonial-desc {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin-top: 320px;
  min-height: 80px;
  padding: 0 20px;
}
.gallery-container {
  align-items: center;
  display: flex;
  height: 400px;
  margin: -250px auto 0;
  max-width: 1000px;
  position: relative;
}

.gallery-item {
  height: 150px;
  opacity: 0;
  position: absolute;
  transition: all 0.3s ease-in-out;
  width: 100px;
  z-index: 0;
  border-radius: 8px;
  object-fit: cover;
}

.gallery-item-1 {
  left: 15%;
  opacity: .4;
  transform: translateX(-50%);
  margin-top: 150px;
}

.gallery-item-2,
.gallery-item-4 {
  height: 150px;
  opacity: 1;
  width: 100px;
  z-index: 1;
}

.gallery-item-2 {
  left: 30%;
  transform: translateX(-88%);
  margin-top: 150px;
}

.gallery-item-3 {
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
  height: 250px;
  opacity: 1;
  left: 50%;
  transform: translateX(-50%);
  width: 350px;
  z-index: 2;
  margin-top: 50px;
}

.gallery-item-4 {
  left: 70%;
  transform: translateX(-12%);
  margin-top: 150px;
}

.gallery-item-5 {
  left: 85%;
  opacity: .4;
  transform: translateX(-48%);
  margin-top: 150px;
}

.gallery-controls {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.gallery-controls button {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  margin: 0 20px;
  padding: 0 12px;
  text-transform: capitalize;
}
/* 隐藏原有的add按钮，不需要新增评价功能可直接保留该样式 */
.gallery-controls-add {
  display: none;
}
.gallery-controls-next{
  position: absolute!important;
  right: 8%;
  top: 58%;
}
.gallery-controls-previous {
  position: absolute!important;
  left: 8%;
  top: 58%;
}

.gallery-controls button:focus {
  outline: none;
}

.gallery-controls-previous {
  position: relative;
}

.gallery-controls-previous::before {
  border: solid #ffc20e;
  border-width: 0 2px 2px 0;
  content: '';
  display: inline-block;
  height: 15px;
  left: -10px;
  padding: 2px;
  position: absolute;
  top: 0;
  transform: rotate(135deg) translateY(-50%);
  transition: left 0.15s ease-in-out;
  width: 15px;
}

.gallery-controls-previous:hover::before {
  left: -18px;
}

.gallery-controls-next {
  position: relative;
}

.gallery-controls-next::before {
  border: solid #ffc20e;
  border-width: 0 2px 2px 0;
  content: '';
  display: inline-block;
  height: 15px;
  padding: 2px;
  position: absolute;
  right: -10px;
  top: 50%;
  transform: rotate(-45deg) translateY(-50%);
  transition: right 0.15s ease-in-out;
  width: 15px;
}

.gallery-controls-next:hover::before {
  right: -18px;
}

.gallery-nav {
  bottom: -15px;
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  position: absolute;
  width: 100%;
}

.gallery-nav li {
  background: #ccc;
  border-radius: 50%;
  height: 10px;
  margin: 0 16px;
  width: 10px;
}

.gallery-nav li.gallery-item-selected {
  background: #555;
}

JS代码 

const galleryContainer = document.querySelector('.gallery-container');
const galleryControlsContainer = document.querySelector('.gallery-controls');
const galleryControls = ['previous', 'add', 'next'];
const galleryItems = document.querySelectorAll('.gallery-item');
// 新增获取评价信息DOM节点
const testimonialTitle = document.querySelector('.testimonial-title');
const testimonialDesc = document.querySelector('.testimonial-desc');

class Carousel {
  constructor(container, items, controls) {
    this.carouselContainer = container;
    this.carouselControls = controls;
    this.carouselArray = [...items];
    // 新增定时器变量存储
    this.autoPlayTimer = null;
    // 自动轮播间隔，单位毫秒，可自行调整
    this.autoPlayDelay = 3000;
  }

  // 新增同步评价信息方法
  updateTestimonialInfo() {
    // 当前居中项为carouselArray的第三个元素（索引2）
    const currentActiveItem = this.carouselArray[2];
    testimonialTitle.innerText = currentActiveItem.dataset.title;
    testimonialDesc.innerText = currentActiveItem.dataset.desc;
  }

  updateGallery() {
    this.carouselArray.forEach(el => {
      el.classList.remove('gallery-item-1');
      el.classList.remove('gallery-item-2');
      el.classList.remove('gallery-item-3');
      el.classList.remove('gallery-item-4');
      el.classList.remove('gallery-item-5');
    });

    this.carouselArray.slice(0, 5).forEach((el, i) => {
      el.classList.add(`gallery-item-${i+1}`);
    });
    // 轮播更新后同步评价信息
    this.updateTestimonialInfo();
  }

  setCurrentState(direction) {
    if (direction.className == 'gallery-controls-previous') {
      this.carouselArray.unshift(this.carouselArray.pop());
    } else {
      this.carouselArray.push(this.carouselArray.shift());
    }
    this.updateGallery();
  }

  setControls() {
    this.carouselControls.forEach(control => {
      galleryControlsContainer.appendChild(document.createElement('button')).className = `gallery-controls-${control}`;
      document.querySelector(`.gallery-controls-${control}`).innerText = control;
    });
  }

  // 新增自动播放方法
  startAutoPlay() {
    this.autoPlayTimer = setInterval(() => {
      this.setCurrentState(document.querySelector('.gallery-controls-next'));
    }, this.autoPlayDelay);
  }

  // 新增暂停自动播放方法
  stopAutoPlay() {
    clearInterval(this.autoPlayTimer);
    this.autoPlayTimer = null;
  }
 
  useControls() {
    const triggers = [...galleryControlsContainer.childNodes];
    triggers.forEach(control => {
      control.addEventListener('click', e => {
        e.preventDefault();
        if (control.className == 'gallery-controls-add') {
          const newItem = document.createElement('img');
          const latestItem = this.carouselArray.length;
          const latestIndex = this.carouselArray.findIndex(item => item.getAttribute('data-index') == this.carouselArray.length)+1;
          Object.assign(newItem,{
            className: 'gallery-item',
            src: `#{this.carouselArray.length+1}`,
            // 新增的项可自定义标题描述
            dataset: {
              title: `新用户 ${this.carouselArray.length+1}`,
              desc: '自定义新增评价内容'
            }
          });
          newItem.setAttribute('data-index', this.carouselArray.length+1);
          this.carouselArray.splice(latestIndex, 0, newItem);
          document.querySelector(`[data-index="${latestItem}"]`).after(newItem);
          this.updateGallery();
        } else {
          this.setCurrentState(control);
        }
      });
    });
    // 新增鼠标悬停暂停、移出恢复自动播放的事件绑定
    this.carouselContainer.addEventListener('mouseenter', () => this.stopAutoPlay());
    this.carouselContainer.addEventListener('mouseleave', () => this.startAutoPlay());
  }
}

const exampleCarousel = new Carousel(galleryContainer, galleryItems, galleryControls);
exampleCarousel.setControls();
exampleCarousel.useControls();
// 初始化同步评价信息
exampleCarousel.updateTestimonialInfo();
// 启动自动播放
exampleCarousel.startAutoPlay();

内容的提问来源于stack exchange，提问作者SandyS

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.10.05 11:21:03