前端實(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)行測試
總組件代碼：
這里的代碼作者用的是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"></span></div>
<div class="right_icon"><span class="icon iconfont"></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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
前端打印分頁技術(shù)探討與PrintomJs方案實(shí)現(xiàn)代碼
這篇文章主要介紹了前端打印分頁技術(shù)探討與PrintomJs方案的相關(guān)資料,PritomJS通過手動(dòng)和智能分處理策略來實(shí)現(xiàn)精確控制分頁位置,處理文本、圖片和表格、支持頁眉頁腳等功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-05-05
基于javascript實(shí)現(xiàn)句子翻牌網(wǎng)頁版小游戲
這篇文章主要介紹了基于javascript實(shí)現(xiàn)句子翻牌網(wǎng)頁版小游戲的相關(guān)資料,需要的朋友可以參考下2016-03-03
本文通過一系列代碼片段,詳細(xì)介紹了如何使用JavaScript進(jìn)行DOM操作、事件處理、屬性操作、內(nèi)容操作、尺寸和位置獲取,以及實(shí)現(xiàn)簡單的動(dòng)畫效果,涵蓋了基礎(chǔ)和高級技術(shù)點(diǎn),適合初學(xué)者和進(jìn)階開發(fā)者,感興趣的朋友一起看看吧2025-01-01
JavaScript獲取當(dāng)前網(wǎng)頁最后修改時(shí)間的方法
這篇文章主要介紹了JavaScript獲取當(dāng)前網(wǎng)頁最后修改時(shí)間的方法,涉及javascript中document.lastModified屬性的使用技巧,需要的朋友可以參考下2015-04-04
html的DOM中Event對象onblur事件用法實(shí)例
這篇文章主要介紹了html的DOM中Event對象onblur事件用法,實(shí)例分析了onblur事件的使用范圍與對應(yīng)的javascript使用技巧,需要的朋友可以參考下2015-01-01
微信小程序?qū)崿F(xiàn)動(dòng)態(tài)顯示和隱藏某個(gè)控件功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)顯示和隱藏某個(gè)控件功能,涉及微信小程序事件響應(yīng)及樣式動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12
javascript設(shè)計(jì)模式之module(模塊)模式
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式之module(模塊)模式 ，感興趣的小伙伴們可以參考一下2016-08-08
JavaScript默認(rèn)的時(shí)間格式我們一般情況下不會(huì)用，所以需要進(jìn)行格式化，下面小編給大家?guī)砹巳Njs date對象格式化實(shí)例代碼，需要的朋友參考下吧2017-09-09
js遍歷json對象所有key及根據(jù)動(dòng)態(tài)key獲取值的方法(必看)
下面小編就為大家?guī)硪黄猨s遍歷json對象所有key及根據(jù)動(dòng)態(tài)key獲取值的方法(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
在TypeScript中迭代對象鍵Object.keys不起作用的原因和解決方案
在TypeScript中迭代對象鍵object?keys可能是一場噩夢,以下是我所知道的所有解決方案,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2023-10-10