手写banner切换方式

方式"/>

手写banner切换方式

<template><!-- banner轮播切换 --><div class="banner-wrapper"><div class="banner-info"><ul class="box" ref="box"><li v-for="(item, index) in bannerList" :key="index"><img :src="item.img" alt="" /></li></ul></div></div>
</template><script>
export default {name: '',data() {return {bannerList: [{ img: '/img/ocean_bck.png' },{ img: '/img/bck.png' },{ img: '/img/ocean_bck.png' },{ img: '/img/bck.png' },{ img: '/img/ocean_bck.png' },{ img: '/img/bck.png' },{ img: '/img/ocean_bck.png' },// { img: '/img/bck.png' }],timer: null,oBox: '',leftVal: 0,count: 0,iconCount: 0,screenWidth: document.body.clientWidth, // 获取屏幕宽度textList: []}},mounted() {let repeat = [this.bannerList[0]]this.bannerList = this.bannerList.concat(repeat)this.inits()},methods: {inits() {this.oBox = this.$refs.box;/*this.count等于0，播放第一张，this.count等于1，播放第二张，以此类推*/this.timer = setInterval(() => {this.leftVal = `-${838 + 838 * this.count}px` //左边的left值this.count++let len = this.bannerList.length //轮播图片总张数if (this.count === len) {/*临界值，此时最后一张图片已经播放完了，最后一张图和第一张图是一样的，目的是为了无缝衔接，此时需要跳转到第一张图片,随后瞬间滑到第二张图，达到无缝观感*/this.count = 1; //为了下次循环开始跳转第三张，所以设置为1this.oBox.style.transition = `all 0s ease-in-out`;this.oBox.style.left = 0;this.setTimeoutTimer = setTimeout(() => {this.oBox.style.transition = `all 0.5S ease-in-out`;// this.oBox.style.opacity = `0`this.oBox.style.left = `-` + 838 + `px`;clearTimeout(this.setTimeoutTimer)this.setTimeoutTimer = null}, 200);} else { //正常循环this.oBox.style.transition = `all 0.5S ease-in-out`;// this.oBox.style.opacity = `0`this.oBox.style.left = this.leftVal}}, 2000)},},
}
</script><style scoped>
.banner-wrapper {width: 100%;height: 100%;
}.banner-info {width: 50%;height: 100%;margin: 0 auto;position: relative;overflow: hidden;
}.box {display: flex;position: absolute;transition: all 0.5S ease-in-out;left: 0;
}.box>li>img {width: 838px;
}
</style>