欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實現(xiàn)循環(huán)滾動圖片

 更新時間：2022年07月14日 14:06:54   作者：suoh's?Blog  
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)循環(huán)滾動圖片，多圖片輪播，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)循環(huán)滾動圖片的具體代碼，供大家參考，具體內(nèi)容如下

 效果（循環(huán)滾動，可切換方向）：

輪播組件BaseSwiper.vue：

<template>
? ? <div class="swiperBox">
? ? ? ? <img class="imgLeft" @click="clickLeft" src="../../../assets/img/左.png" alt="">
? ? ? ? <img class="imgRight" @click="clickRight" src="../../../assets/img/右.png" alt="">
? ? ? ? <div id="swiper">
? ? ? ? ? ? <div class="imgBox">
? ? ? ? ? ? ? ? <div class="imgDiv" v-for="(item,index) of imgList" :key="index">
? ? ? ? ? ? ? ? ? ? <img :src="item" />
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
</template>
<script>
export default {
? ? name: 'BaseSwiper',
? ? props: {
? ? ? ? speed: Number,
? ? ? ? direction: String,
? ? },
? ? data() {
? ? ? ? return {
? ? ? ? ? ? imgList: [
? ? ? ? ? ? ? ? require('../../../assets/img/組 14.png'),
? ? ? ? ? ? ? ? require('../../../assets/img/組 15.png'),
? ? ? ? ? ? ? ? require('../../../assets/img/組 17.png'),
? ? ? ? ? ? ? ? require('../../../assets/img/組 18.png'),
? ? ? ? ? ? ? ? require('../../../assets/img/組 24.png'),
? ? ? ? ? ? ],
? ? ? ? ? ? timer: null,
? ? ? ? ? ? theSpeed: this.speed,
? ? ? ? ? ? imgWidth: 260,
? ? ? ? ? ? theDirection: this.direction,
? ? ? ? }
? ? },
? ? methods: {
? ? ? ? clickLeft() {
? ? ? ? ? ? this.theDirection = 'left';
? ? ? ? },
? ? ? ? clickRight() {
? ? ? ? ? ? this.theDirection = 'right';
? ? ? ? },
? ? },
? ? mounted() {
? ? ? ? let imgBox = document.getElementsByClassName('imgBox')[0];
? ? ? ? //將imgBox下的圖片進(jìn)行拼接 循環(huán)展示圖片
? ? ? ? imgBox.innerHTML += imgBox.innerHTML;
? ? ? ? let imgDiv = document.getElementsByClassName('imgDiv');
? ? ? ? imgBox.style.width = imgDiv.length * this.imgWidth + 'px';//設(shè)置div的寬度使圖片可以放下
? ? ? ? let self = this;
? ? ? ? console.log(imgBox.offsetWidth,imgBox.style.width )
? ? ? ? function autoScroll() {
? ? ? ? ? ? if (imgBox.offsetLeft < -(imgBox.offsetWidth / 2)) {//提前更新left值，實現(xiàn)循環(huán)展示
? ? ? ? ? ? ? ? imgBox.style.left = 0;
? ? ? ? ? ? }
? ? ? ? ? ? if (imgBox.offsetLeft > 0) {//向右滾動 提前更新left值，實現(xiàn)循環(huán)展示
? ? ? ? ? ? ? ? imgBox.style.left = -(imgBox.offsetWidth / 2) + 'px';
? ? ? ? ? ? }
? ? ? ? ? ? if (self.theDirection == 'left') { //向左滾動,值為負(fù)
? ? ? ? ? ? ? ? self.theSpeed = -Math.abs(self.theSpeed)
? ? ? ? ? ? } else { //向右滾動
? ? ? ? ? ? ? ? self.theSpeed = Math.abs(self.theSpeed)
? ? ? ? ? ? }
? ? ? ? ? ? // 求出總的left值，等于left值加上移動的速度（px值）
? ? ? ? ? ? imgBox.style.left = imgBox.offsetLeft + self.theSpeed + 'px';
? ? ? ? }
? ? ? ? this.timer = setInterval(autoScroll, 30);//全局變量 ，保存返回的定時器
? ? },
? ? beforeDestroy() {
? ? ? ? clearInterval(this.timer);
? ? ? ? this.timer = null;
? ? }
}
</script>
<style scoped lang='less'>
.swiperBox {
? ? height: 100%;
? ? width: 100%;
? ? position: relative;
? ? .imgLeft {
? ? ? ? left: 0;
? ? ? ? top: 40%;
? ? }
? ? .imgLeft,
? ? .imgRight {
? ? ? ? width: 27px;
? ? ? ? height: 38px;
? ? ? ? position: absolute;
? ? ? ? cursor: pointer;
? ? }
? ? .imgRight {
? ? ? ? right: 0;
? ? ? ? top: 40%;
? ? }
? ? .directionIcon:hover {
? ? ? ? opacity: 1;
? ? }
? ? #swiper {
? ? ? ? width: 90%;
? ? ? ? height: 100%;
? ? ? ? margin: 0 auto;
? ? ? ? overflow: hidden;
? ? ? ? position: relative;
? ? ? ? .imgBox {
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? top: 0;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? .imgDiv {
? ? ? ? ? ? ? ? width: 100%;
? ? ? ? ? ? ? ? margin-left: 15px;
? ? ? ? ? ? ? ? img {
? ? ? ? ? ? ? ? ? ? height: 100%;
? ? ? ? ? ? ? ? ? ? width: 280px;
? ? ? ? ? ? ? ? ? ? // width: 260px;
? ? ? ? ? ? ? ? ? ? // height: 120px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
}
</style>

父組件調(diào)用，只貼出關(guān)鍵代碼：

<Swiper :speed="2" :direction="'left'"></Swiper>
?
//引用
import Swiper from '../BaseSwiper/BaseSwiper'
?
components: { Swiper },

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論