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)文章
本文總結(jié)了在Vue2項目中使用element-ui的el-table組件在彈窗中展示數(shù)據(jù),并實現(xiàn)基礎(chǔ)的勾選功能,內(nèi)容包括如何設(shè)置row-key、使用reserve-selection屬性、修改數(shù)據(jù)獲取函數(shù)以支持跨頁勾選以及如何在關(guān)閉彈窗時清理selection,感興趣的朋友跟隨小編一起看看吧2024-12-12
vue 判斷兩個時間插件結(jié)束時間必選大于開始時間的代碼
這篇文章主要介紹了vue 判斷兩個時間插件結(jié)束時間必選大于開始時間的代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue.js通過路由實現(xiàn)經(jīng)典的三欄布局實例代碼
本文通過實例代碼給大家介紹了vue.js通過路由實現(xiàn)經(jīng)典的三欄布局，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
這篇文章主要介紹了vue.js封裝switch開關(guān)組件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue2和vue3的組件封裝還是有區(qū)別,下面這篇文章主要給大家介紹了關(guān)于Vue3如何封裝組件的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-02-02
vue使用jsonp抓取qq音樂數(shù)據(jù)的方法
這篇文章主要介紹了vue使用jsonp抓取qq音樂數(shù)據(jù)的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
本篇文章主要介紹了詳解vue.js的devtools安裝 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了vue新聞自下往上滾動效果,當(dāng)鼠標(biāo)鼠標(biāo)放上暫停滾動，鼠標(biāo)移出繼續(xù)滾動，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-04-04
Vue.set()動態(tài)的新增與修改數(shù)據(jù),觸發(fā)視圖更新的方法
今天小編就為大家分享一篇Vue.set()動態(tài)的新增與修改數(shù)據(jù),觸發(fā)視圖更新的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本文主要介紹了element表單校驗提示定位到元素位置，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08