This article uses vue to simply implement the basic function of a carousel diagram and extract it as a public component for easy reuse.
html and js parts
<template>
<div
class="img-box"
ref="img-box"
:style="{width: , height: }"
>
<div v-for="(item, index) in imgList"
:key="index"
class="img-item"
:ref="'img-item-' + index"
:class="{'active': index === active}"
>
<img
:src="item"
style="width:100%"
:style="{height: }"
/>
</div>
<div
class="img-position"
v-if="isShowPosition"
>
<template v-for="(item, index) in imgList">
<span :key="index"
class="img-position-item"
:ref="'img-position-' + index"
:class="[
{'active': index === active},
isCircle ? 'circle' : '',
isNums ? 'nums' : ''
]"
@click="clickSpan(index)"
>
{{isNums ? index + 1 : ''}}
</span>
</template>
</div>
<div
class="left-btn"
v-if="isShowLeftOrRightBtn"
@click="clickBtn('left')"
>
<i class="iconfont roll-zuo"></i>
</div>
<div
class="right-btn"
v-if="isShowLeftOrRightBtn"
@click="clickBtn('right')"
>
<i class="iconfont roll-you"></i>
</div>
</div>
</template>
<script>
export default {
name: 'Roll',
props: {
imgList: { // Picture list src array type: Array,
default: () => []
},
isShowPosition: { // Whether to display the small dots below type: Boolean,
default: true
},
positionInner: { // Dot content type: String,
default: 'circle' // Default dot, optional value circle => dot num => number both => dot + number },
isShowLeftOrRightBtn: { // Whether to display left and right buttons type: Boolean,
default: true
},
duration: { // Switch interval type: [Number, String],
default: 3000
},
styles: { // Custom carousel picture width and height default 500*300 type: Object,
default: () => {
return {
width: '500px',
height: '300px'
}
}
}
},
data () {
return {
active: 0, // Current carousel picture timer: null // Timer }
},
computed: {
isCircle () {
return ['circle', 'both'].includes()
},
isNums () {
return ['num', 'both'].includes()
}
},
updated () {
if () ()
()
},
created () {
()
},
methods: {
clickSpan (index) {
()
= index
},
clickBtn (arg) {
()
if (arg === 'left') {
= - 1 < 0 ? - 1 : - 1
} else {
= + 1 === ? 0 : + 1
}
()
},
setTimer () {
= setInterval(() => {
('right')
}, Number())
},
clearTimer () {
clearInterval()
= null
}
}
}
</script>CSS Style Part
<style scoped>
@import url('///t/font_1451815_senarwrqu6.css');
* {
margin: 0;
padding: 0;
}
.img-box {
position: relative;
margin: 0 auto;
}
.img-item {
height: 100%;
width: 100%;
opacity: 0;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -5;
text-align: center;
}
. {
z-index: 0;
opacity: 1;
transition: .3s;
}
.img-position {
position: absolute;
bottom: 5px;
left: 50%;
display: flex;
transform: translate(-50%, 0);
}
.img-position-item {
display: inline-block;
width:10px;
height:10px;
box-sizing: border-box;
cursor: pointer;
}
. {
border-radius: 50%;
border: 1px solid #606266;
}
. {
width: 18px;
height: 18px;
display: flex;
justify-content: center;
align-items: center;
color: #606266;
font-size:14px;
}
.img-position-item:hover, . {
border-color: #d1d2d3;
color: #d1d2d3;
transition: .3s;
}
.img-position-item + .img-position-item {
margin-left: 10px;
}
.left-btn, .right-btn {
position: absolute;
top: 50%;
bottom: 0;
width: 20px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: #d1d2d3;
font-size: 20px;
transform: translate(0, -50%);
}
.left-btn:hover, .right-btn:hover {
color: #fff;
transition: .3s;
}
.left-btn {
left: 5px;
}
.right-btn {
right: 5px;
}
</style>It simply implemented a relatively basic part of a carousel diagram. I wrote it in native before, but now I wrote it in vue as a component, which is not bad.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.