前端實(shí)現(xiàn)多個(gè)內(nèi)容滑動(dòng)輪播圖效果實(shí)例

更新時(shí)間：2025年04月09日 08:25:09 作者：心.c

在前端開發(fā)中,滑動(dòng)輪播圖是一種常見的交互元素,用于展示多張圖片或內(nèi)容,這篇文章主要介紹了前端實(shí)現(xiàn)多個(gè)內(nèi)容滑動(dòng)輪播圖效果的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下

前幾天寫的前端項(xiàng)目當(dāng)中自己寫了一個(gè)比較好用的輪播組件，分享給大家

圖片具有點(diǎn)擊效果和滑動(dòng)效果，這里作者放了9張圖片，大家有需要可以使用~

圖片在這里大家可以直接進(jìn)行測(cè)試

總組件代碼：

這里的代碼作者用的是Vue3，大家沒有學(xué)過的可以使用al給你轉(zhuǎn)成正常的js代碼~~~

<script setup>
import { onMounted, onUnmounted } from 'vue'
onMounted(() => {
  const container = document.querySelector('.product_box')
  const leftIcon = document.querySelector('.left_icon')
  const rightIcon = document.querySelector('.right_icon')
  const items1 = document.querySelectorAll('.product_detail')
  const itemCount = items1.length
  let currentIndex = 0
  let isAnimating = false
  let autoSlideInterval
  let visibleItems = 3 // 初始值

  // 初始化
  updateCarousel()

  // 監(jiān)聽視窗大小變化
  window.addEventListener('resize', () => {
    updateCarousel()
  })

  function updateCarousel() {
    if (isAnimating) return
    isAnimating = true

    // 計(jì)算位移百分比（每個(gè)項(xiàng)目占 1/visibleItems）
    const translateX = -currentIndex * (100 / visibleItems / 1.07)
    container.style.transform = `translateX(${translateX}%)`
    container.style.transition = '1s'

    // 重置動(dòng)畫狀態(tài)
    setTimeout(() => {
      isAnimating = false
    }, 500)
  }

  function nextSlide1() {
    stopAutoSlide()
    if (currentIndex >= itemCount - visibleItems) {
      // 到達(dá)最后時(shí)回到第一個(gè)
      currentIndex = 0
    } else {
      currentIndex++
    }
    updateCarousel()
    startAutoSlide()
  }

  function prevSlide1() {
    stopAutoSlide()
    if (currentIndex <= 0) {
      // 到達(dá)第一個(gè)時(shí)跳到最后
      currentIndex = itemCount - visibleItems
    } else {
      currentIndex--
    }
    updateCarousel()
    startAutoSlide()
  }

  function startAutoSlide() {
    autoSlideInterval = setInterval(nextSlide1, 3000) // 每3秒切換一次
  }

  // 停止自動(dòng)輪播的函數(shù)
  function stopAutoSlide() {
    if (autoSlideInterval) {
      clearInterval(autoSlideInterval)
      autoSlideInterval = null
    }
  }

  // 添加按鈕事件
  rightIcon.addEventListener('click', nextSlide1)
  leftIcon.addEventListener('click', prevSlide1)

  startAutoSlide()

  onUnmounted(() => {
    clearInterval(autoSlideInterval)
  })
})
</script>
<template>
  <div class="product_content">
    <div class="product_box">
      <div class="product_content_box">
        <div class="product_detail product_detail_1">
          <div class="product_topImg">
            <img src="@/assets/image1.png" alt="" />
          </div>
          <div class="product_h">動(dòng)物頭像</div>
          <div class="product_hr"></div>
          <div class="product_p">可愛小貓</div>
          <div class="product_button" @click="toProduct('高壓電器產(chǎn)業(yè)')"></div>
        </div>
        <div class="product_detail">
          <div class="product_topImg">
            <img src="@/assets/image2.png" alt="" />
          </div>
          <div class="product_h">動(dòng)物頭像</div>
          <div class="product_hr"></div>
          <div class="product_p">可愛小貓</div>
          <div class="product_button" @click="toProduct('運(yùn)維檢修業(yè)務(wù)')"></div>
        </div>
        <div class="product_detail">
          <div class="product_topImg">
            <img src="@/assets/image3.png" alt="" />
          </div>
          <div class="product_h">動(dòng)物頭像</div>
          <div class="product_hr"></div>
          <div class="product_p">可愛小貓</div>
          <div class="product_button" @click="toProduct('零部件制造產(chǎn)業(yè)')"></div>
        </div>
        <div class="product_detail">
          <div class="product_topImg">
            <img src="@/assets/image1.png" alt="" />
          </div>
          <div class="product_h">動(dòng)物頭像</div>
          <div class="product_hr"></div>
          <div class="product_p">可愛小貓</div>
          <div class="product_button" @click="toProduct('電力儲(chǔ)能業(yè)務(wù)')"></div>
        </div>
        <div class="product_detail">
          <div class="product_topImg">
            <img src="@/assets/image2.png" alt="" />
          </div>
          <div class="product_h">動(dòng)物頭像</div>
          <div class="product_hr"></div>
          <div class="product_p">可愛小貓</div>
          <div class="product_button" @click="toProduct('配電網(wǎng)產(chǎn)業(yè)')"></div>
        </div>
        <div class="product_detail">
          <div class="product_topImg">
            <img src="@/assets/image1.png" alt="" />
          </div>
          <div class="product_h">動(dòng)物頭像</div>
          <div class="product_hr"></div>
          <div class="product_p">可愛小貓</div>
          <div class="product_button" @click="toProduct('系統(tǒng)集成業(yè)務(wù)')"></div>
        </div>
        <div class="product_detail">
          <div class="product_topImg">
            <img src="@/assets/image2.png" alt="" />
          </div>
          <div class="product_h">動(dòng)物頭像</div>
          <div class="product_hr"></div>
          <div class="product_p">可愛小貓</div>
          <div class="product_button" @click="toProduct('智慧配用電業(yè)務(wù)')"></div>
        </div>
        <div class="product_detail">
          <div class="product_topImg">
            <img src="@/assets/image3.png" alt="" />
          </div>
          <div class="product_h">動(dòng)物頭像</div>
          <div class="product_hr"></div>
          <div class="product_p">可愛小貓</div>
          <div class="product_button" @click="toProduct('綜合能源服務(wù)業(yè)務(wù)')"></div>
        </div>
      </div>
    </div>
    <div class="left_icon"><span class="icon iconfont">&#xe607;</span></div>
    <div class="right_icon"><span class="icon iconfont">&#xe606;</span></div>
  </div>
</template>
<style scoped>
.product_box {
  /* overflow: hidden; */
  width: 94%;
  min-width: 120rem;
  margin: auto;
  padding-left: 1.875rem;
  padding-right: 4.375rem;
}

.product_content_box {
  display: flex;
  width: 95%;
  margin: auto;
}

.product_detail {
  flex-shrink: 0;
  width: calc(33.333%);
  /* 每個(gè)圖標(biāo)占據(jù)三分之一的視口寬度 */
  height: 43.75rem;
  margin: 0.625rem;
  color: white;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  animation: scaleIn 1s ease-in-out;
}

.product_topImg {
  position: relative;
  width: 26.25rem;
  height: 26.25rem;
  margin: auto;
  cursor: pointer;
  z-index: 1000;
  animation: floatAnimation 3s ease-in-out infinite;
}

.product_topImg img {
  width: 100%;
  height: 100%;
  margin-left: -0.3125rem;
  margin: auto;
}

@keyframes floatAnimation {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.5625rem);
  }
}

.product_topImg:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: opacity 1s ease;
  /* 設(shè)置過渡效果 */
  opacity: 0.3;
  /* 默認(rèn)透明 */
  z-index: -1;
  /* 確保在圖片下方 */
}

.product_topImg:hover:before {
  background-image: url('@/assets/imgs/_10_homePageImgs/circle.png');
  /* 懸停時(shí)的背景圖片 */
  opacity: 1;
}

.product_h {
  font-size: 2.5rem;
  font-family: 'AlibabaPuHuiTi_2_55_Regular';
  color: rgb(0, 111, 193);
  text-align: center;
}

.product_hr {
  width: 6.625rem;
  height: 0.125rem;
  background-color: #2081c9;
  text-align: center;
  margin: 1.25rem 0rem;
  margin: auto;
  margin-top: 0.625rem;
  margin-bottom: 0.9375rem;
}

.product_p {
  width: 21.625rem;
  height: 4.5rem;
  font-size: 1.25rem;
  font-family: 'AlibabaPuHuiTi_2_45_Light';
  color: rgb(89, 87, 87);
  text-align: center;
  margin: auto;
}

.product_button {
  position: relative;
  width: 8.6875rem;
  height: 2rem;
  margin: auto;
  text-align: center;
  background-image: url('@/assets/imgs/_10_homePageImgs/button.png');
  background-size: contain;
  margin-top: 1.875rem;
  transition: all 0.3s ease;
  cursor: pointer;
  background-repeat: no-repeat;
}

.product_button:hover {
  transform: scale(1.1);
  /* translate(0, -0.3125rem) 使文字在Y軸方向向上移動(dòng)0.3125rem，scale(1.1) 使文字放大到原來的1.1倍 */
  color: #58ffa9;
  /* 改變文字顏色 */
}

.product_button span {
  position: absolute;
  top: 0;
  left: 2.1rem;
  font-size: 1.125rem;
  line-height: 2rem;
  font-family: 'AlibabaPuHuiTi_2_45_Light';
  color: rgb(0, 111, 193);
}

.left_icon .icon {
  top: 10rem;
  left: 3.75rem;
  position: absolute;
  font-size: 4.375rem;
  color: #006fc1;
  z-index: 100;
  cursor: pointer;
}

.right_icon .icon {
  position: absolute;
  font-size: 4.375rem;
  top: 10rem;
  right: 3.125rem;
  color: #006fc1;
  z-index: 100;
  cursor: pointer;
}
</style>

總結(jié)

到此這篇關(guān)于前端實(shí)現(xiàn)多個(gè)內(nèi)容滑動(dòng)輪播圖效果的文章就介紹到這了,更多相關(guān)前端多個(gè)內(nèi)容滑動(dòng)輪播圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: