vue實現循環滾動圖片

3403771864 發布于2022-09-12 20:17 / 819人閱讀

　　運用vue可以實現圖片自動循環滾動，下面是效果展示（循環滾動且可切換方向）：

　　輪播組件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下的圖片進行拼接 循環展示圖片
　　imgBox.innerHTML += imgBox.innerHTML;
　　let imgDiv = document.getElementsByClassName('imgDiv');
　　imgBox.style.width = imgDiv.length * this.imgWidth + 'px';//設置div的寬度使圖片可以放下
　　let self = this;
　　console.log(imgBox.offsetWidth,imgBox.style.width )
　　function autoScroll() {
　　if (imgBox.offsetLeft < -(imgBox.offsetWidth / 2)) {//提前更新left值，實現循環展示
　　imgBox.style.left = 0;
　　}
　　if (imgBox.offsetLeft > 0) {//向右滾動 提前更新left值，實現循環展示
　　imgBox.style.left = -(imgBox.offsetWidth / 2) + 'px';
　　}
　　if (self.theDirection == 'left') { //向左滾動,值為負
　　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>
　　.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>

　　父組件調用，只貼出關鍵代碼：

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

GPU云服務器云服務器 html圖片滾動循環 js循環滾動 html頭像循環滾動 js不間斷循環滾動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127674.html

vue-music（1）音樂播發器項目開發記錄

摘要：在中新建組件許文瑞正在吃屎。。。。在中添加如下代碼三歌手組件開發歌手首頁開發數據獲取數據獲取依舊從音樂官網獲取歌手接口創建我們和以前一樣，利用我們封裝的等發放，來請求我們的接口，返回給。 Vue-Music 跟學一個網課老師做的仿原生音樂APP跟學的筆記，記錄點滴，也希望對學習vue初學小伙伴有點幫助 showImg(https://segmentfault.com/img/remot...

happen 2019-08-23 11:29 評論0 收藏0
vue輪播圖插件之vue-awesome-swiper

摘要：移動端輪播圖插件，在使用圖形界面插件中的組件無法實現觸摸滑動后，轉而使用插件安裝我這里安裝的是下面的這個版本使用全局導入樣式的話，我這里有用到分頁器，就在全局中引入了樣式組件引入在中使用常見的小圓點移動端輪播圖插件，在使用iview圖形界面插件中的carousel組件無法實現觸摸滑動后，轉而使用vue-awesome-swiper插件 1.npm安裝 npm i vue-awesom...

binta 2019-08-23 12:00 評論0 收藏0
vue better-scroll 遇到的坑

摘要：先看效果介紹一個簡單的靜態頁面主要是使用做橫向滾動，點擊標簽滾動到相應位置，以及滾到相應位置后對應標簽顯示紅色。先看效果 showImg(https://segmentfault.com/img/bVbqAdC?w=374&h=626); 介紹一個簡單的靜態頁面主要是使用 better-scroll 做橫向滾動，點擊標簽滾動到相應位置，以及滾到相應位置后對應標簽顯示紅色。開發過程中...

yiliang 2019-08-23 16:30 評論0 收藏0
vue全家桶仿某魚部分布局以及功能實現

摘要：在這里簡單敘述一下我仿某魚部分布局以及功能實現的過程，僅做學習用途。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，也完全能夠為復雜的單頁面應用提供驅動。可以進行確認收貨后刪除訂單。前言每次寫文章時，總會覺得比寫代碼難多了，可能這就是我表述方面的不足吧，然而寫文章也是可以復盤一下自己的開發過程，對自己還是受益良多的。在這里簡單敘述一下我仿某魚部分布局以及功能實現的過程，僅做...

dreamGong 2019-08-23 11:01 評論0 收藏0