使用
<carouselPlay :sliders="imgs" :autoplay='true' :duration="5"></carouselPlay>
代码部分
<template>
<div class='xtx-carousel' @mouseenter="stop()" @mouseleave="start()">
<ul class="carousel-body" ref="carousel">
<li class="carousel-item" v-for="(item, i) in sliders" :key="i">
<img :src="item" alt="">
</li>
<li class="carousel-item" v-for="(item, i) in sliders" :key="i">
<img :src="item" alt="">
</li>
<li class="carousel-item" v-for="(item, i) in sliders" :key="i">
<img :src="item" alt="">
</li>
</ul>
<a @click="scrollFun(-1)" href="javascript:;" class="carousel-btn prev"><el-icon>
<ArrowLeft />
</el-icon></a>
<a @click="scrollFun(1)" href="javascript:;" class="carousel-btn next"><el-icon>
<ArrowRight />
</el-icon></a>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const props = defineProps({
sliders: {
type: Array,
default: () => []
},
duration: {
type: Number,
default: 2
},
autoplay: {
type: Boolean,
default: false
}
});
const carousel = ref()
var width = 0
let timer = null;
var itemWidth = 0;
var left = 0;
const autoplayFn = () => {
clearInterval(timer)
timer = setInterval(() => {
scrollFun()
}, props.duration * 1000)
}
const scrollFun = (step) => {
if (!carousel.value) return
if (step == -1) {
left += itemWidth;
} else {
left -= itemWidth;
}
if (left <= -width * 2) {
setTimeout(() => {
left = -width
carousel.value.style.transitionDuration = "0s"
carousel.value.style.transform = `translateX(${left}px)`;
}, 500)
} else if (left >= -width) {
setTimeout(() => {
left = -width * 2
carousel.value.style.transitionDuration = "0s"
carousel.value.style.transform = `translateX(${left}px)`;
}, 500)
} else {
carousel.value.style.transitionDuration = "0.5s"
}
carousel.value.style.transform = `translateX(${left}px)`;
}
onMounted(() => {
width = carousel.value.getBoundingClientRect().width / 3;
left = -width;
var item = getComputedStyle(document.querySelector(".carousel-item"))
itemWidth = parseFloat(item.width) + parseFloat(item.marginLeft) + parseFloat(item.marginRight);
if (props.sliders.length > 1 && props.autoplay) {
carousel.value.style.transform = `translateX(${left}px)`;
autoplayFn()
}
})
onUnmounted(() => {
clearInterval(timer);
timer = null;
});
const stop = () => {
if (timer) clearInterval(timer)
}
const start = () => {
autoplayFn()
}
</script>
<style scoped lang="scss">
.xtx-carousel {
white-space: nowrap;
overflow: hidden;
width: 100%;
align-self: flex-start;
display: flex;
position: relative;
&:hover {
.carousel-btn {
opacity: 1;
}
}
.carousel-body {
white-space: nowrap;
// overflow: hidden;
padding: 0;
transition: all 0.5s;
}
.carousel-item {
width: 388px;
height: 280px;
display: inline-block;
// filter: drop-shadow(0px 4px 28px rgba(0, 0, 0, 0.16));
border-radius: 8px;
overflow: hidden;
margin: 0 12px;
img {
width: 100%;
height: 100%;
}
}
.carousel-indicator {
position: absolute;
left: 0;
bottom: 20px;
z-index: 2;
width: 100%;
text-align: center;
span {
display: inline-block;
width: 12px;
height: 12px;
background: rgba(0, 0, 0, 0.2);
border-radius: 50%;
cursor: pointer;
~span {
margin-left: 12px;
}
&.active {
background: #fff;
}
}
}
.carousel-btn {
width: 44px;
height: 44px;
background: rgba(0, 0, 0, 0.2);
color: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
text-align: center;
line-height: 44px;
opacity: 0;
transition: all 0.5s;
&.prev {
left: 20px;
}
&.next {
right: 20px;
}
}
}
</style>