当前位置：首页 > 行业动态 > 正文

banner js效果代码

admin
行业动态
2025-04-11
4

JavaScript banner动态效果可通过轮播、淡入淡出、滑动等交互增强视觉表现，常用requestAnimationFrame或CSS3动画实现流畅过渡，结合HTML/CSS布局与事件监听，支持自动播放、响应式适配及触摸滑动功能，推荐使用GSAP等库优化性能与兼容性。

banner js效果代码

<section class="banner-container">
  <div class="autoplay-carousel" aria-label="精选内容轮播图">
    <div class="carousel-item">
      <img 
        src="image1.jpg" 
        alt="夏季促销活动" 
        loading="lazy" 
        width="1920" 
        height="600"
        data-src="image1.webp"
      >
      <div class="content-overlay">
        <h2>限时特惠专场</h2>
        <p>精选商品低至5折起</p>
        <a href="/sale" class="cta-button" aria-label="立即抢购">查看详情</a>
      </div>
    </div>
    <!-- 重复项目结构 -->
  </div>
  <div class="pagination-dots" role="navigation"></div>
</section>
<style>
.banner-container {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
}
.carousel-item {
  position: relative;
  transition: opacity 0.8s ease-in-out;
}
.content-overlay {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
.cta-button {
  background: #FF6B6B;
  padding: 12px 28px;
  border-radius: 30px;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}
</style>
<script defer>
class BannerSlider {
  constructor(container) {
    this.DOM = {
      container: document.querySelector(container),
      items: document.querySelectorAll(`${container} .carousel-item`),
      dots: []
    }
    this.currentIndex = 0
    this.autoplayInterval = 5000
    this.initializeSlider()
  }
  initializeSlider() {
    this.createPagination()
    this.DOM.items[0].classList.add('active')
    this.startAutoplay()
    this.addEventListeners()
  }
  createPagination() {
    const dotsContainer = this.DOM.container.querySelector('.pagination-dots')
    this.DOM.items.forEach((_, index) => {
      const dot = document.createElement('button')
      dot.classList.add('dot')
      dot.setAttribute('aria-label', `切换到第${index+1}张`)
      dot.addEventListener('click', () => this.goToSlide(index))
      dotsContainer.appendChild(dot)
      this.DOM.dots.push(dot)
    })
  }
  startAutoplay() {
    this.timer = setInterval(() => this.nextSlide(), this.autoplayInterval)
  }
  nextSlide() {
    const nextIndex = (this.currentIndex + 1) % this.DOM.items.length
    this.transitionSlides(nextIndex)
  }
  transitionSlides(newIndex) {
    this.DOM.items[this.currentIndex].classList.remove('active')
    this.DOM.dots[this.currentIndex].classList.remove('active')
    this.DOM.items[newIndex].classList.add('active')
    this.DOM.dots[newIndex].classList.add('active')
    this.currentIndex = newIndex
  }
  addEventListeners() {
    this.DOM.container.addEventListener('mouseenter', () => clearInterval(this.timer))
    this.DOM.container.addEventListener('mouseleave', () => this.startAutoplay())
    window.addEventListener('resize', this.handleResize.bind(this))
    document.addEventListener('visibilitychange', () => {
      document.hidden ? clearInterval(this.timer) : this.startAutoplay()
    })
  }
  handleResize() {
    clearInterval(this.timer)
    this.startAutoplay()
  }
}
document.addEventListener('DOMContentLoaded', () => {
  const slider = new BannerSlider('.autoplay-carousel')
})
// 图片懒加载实现
if ('loading' in HTMLImageElement.prototype) {
  const images = document.querySelectorAll('img[loading="lazy"]');
  images.forEach(img => {
    img.src = img.dataset.src;
  });
} else {
  // 兼容旧版浏览器的懒加载方案
}
</script>
<section class="seo-optimization">
  <div class="structured-data" itemscope itemtype="https://schema.org/WebPage">
    <meta itemprop="name" content="品牌动态横幅">
    <meta itemprop="description" content="展示最新品牌活动与优惠信息的交互式横幅">
  </div>
</section>