vue實(shí)現(xiàn)循環(huán)滾動(dòng)圖片
本文實(shí)例為大家分享了vue實(shí)現(xiàn)循環(huán)滾動(dòng)圖片的具體代碼,供大家參考,具體內(nèi)容如下
效果(循環(huán)滾動(dòng),可切換方向):
輪播組件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值,實(shí)現(xiàn)循環(huán)展示 ? ? ? ? ? ? ? ? imgBox.style.left = 0; ? ? ? ? ? ? } ? ? ? ? ? ? if (imgBox.offsetLeft > 0) {//向右滾動(dòng) 提前更新left值,實(shí)現(xiàn)循環(huán)展示 ? ? ? ? ? ? ? ? imgBox.style.left = -(imgBox.offsetWidth / 2) + 'px'; ? ? ? ? ? ? } ? ? ? ? ? ? if (self.theDirection == 'left') { //向左滾動(dòng),值為負(fù) ? ? ? ? ? ? ? ? self.theSpeed = -Math.abs(self.theSpeed) ? ? ? ? ? ? } else { //向右滾動(dòng) ? ? ? ? ? ? ? ? self.theSpeed = Math.abs(self.theSpeed) ? ? ? ? ? ? } ? ? ? ? ? ? // 求出總的left值,等于left值加上移動(dòng)的速度(px值) ? ? ? ? ? ? imgBox.style.left = imgBox.offsetLeft + self.theSpeed + 'px'; ? ? ? ? } ? ? ? ? this.timer = setInterval(autoScroll, 30);//全局變量 ,保存返回的定時(shí)器 ? ? }, ? ? 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 },
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue封裝實(shí)現(xiàn)自動(dòng)循環(huán)滾動(dòng)的列表
- vue實(shí)現(xiàn)列表無(wú)縫循環(huán)滾動(dòng)
- vue實(shí)現(xiàn)公告消息橫向無(wú)縫循環(huán)滾動(dòng)
- 基于vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表功能
- Vue實(shí)現(xiàn)一種簡(jiǎn)單的無(wú)限循環(huán)滾動(dòng)動(dòng)畫(huà)的示例
- vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表
- vue自定義table表如何實(shí)現(xiàn)內(nèi)容上下循環(huán)滾動(dòng)
相關(guān)文章
關(guān)于vue打包時(shí)的publicPath就是打包后靜態(tài)資源的路徑問(wèn)題
這篇文章主要介紹了vue打包時(shí)的publicPath,就是打包后靜態(tài)資源的路徑,本文通過(guò)三種情況分析給大家詳細(xì)介紹,需要的朋友可以參考下2022-07-07Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù)
這篇文章主要介紹了Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù),對(duì)vue感興趣的同學(xué),可以參考下2021-04-04vue2.x中keep-alive源碼解析(實(shí)例代碼)
Keep-Alive模式避免頻繁創(chuàng)建、銷毀鏈接,允許多個(gè)請(qǐng)求和響應(yīng)使用同一個(gè)HTTP鏈接,這篇文章主要介紹了vue2.x中keep-alive源碼解析,需要的朋友可以參考下2023-02-02Vue.js實(shí)現(xiàn)價(jià)格計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)價(jià)格計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08vue中父子組件注意事項(xiàng),傳值及slot應(yīng)用技巧
這篇文章主要介紹了vue中父子組件注意事項(xiàng),傳值及slot應(yīng)用技巧,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05vue?使用el-table循環(huán)輪播數(shù)據(jù)列表的實(shí)現(xiàn)
這篇文章主要介紹了vue?使用el-table循環(huán)輪播數(shù)據(jù)列表的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue中實(shí)現(xiàn)頁(yè)面刷新以及局部刷新的方法
這篇文章主要給大家介紹了關(guān)于vue中實(shí)現(xiàn)頁(yè)面刷新以及局部刷新的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01vue項(xiàng)目中axios請(qǐng)求網(wǎng)絡(luò)接口封裝的示例代碼
這篇文章主要介紹了vue項(xiàng)目中axios請(qǐng)求網(wǎng)絡(luò)接口封裝的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12