国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue實(shí)現(xiàn)循環(huán)滾動(dòng)圖片

3403771864 / 844人閱讀

　　運(yùn)用vue可以實(shí)現(xiàn)圖片自動(dòng)循環(huán)滾動(dòng)，下面是效果展示（循環(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>
　　.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 },


文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/127674.html

相關(guān)文章

  • vue-music（1）音樂(lè)播發(fā)器 項(xiàng)目開發(fā)記錄

    摘要：在中新建組件許文瑞正在吃屎。。。。在中添加如下代碼三歌手組件開發(fā)歌手首頁(yè)開發(fā)數(shù)據(jù)獲取數(shù)據(jù)獲取依舊從音樂(lè)官網(wǎng)獲取歌手接口創(chuàng)建我們和以前一樣，利用我們封裝的等發(fā)放，來(lái)請(qǐng)求我們的接口，返回給。 Vue-Music 跟學(xué)一個(gè)網(wǎng)課老師做的仿原生音樂(lè)APP跟學(xué)的筆記，記錄點(diǎn)滴，也希望對(duì)學(xué)習(xí)vue初學(xué)小伙伴有點(diǎn)幫助 showImg(https://segmentfault.com/img/remot...

    happen 評(píng)論0 收藏0

  • vue輪播圖插件之vue-awesome-swiper

    摘要：移動(dòng)端輪播圖插件，在使用圖形界面插件中的組件無(wú)法實(shí)現(xiàn)觸摸滑動(dòng)后，轉(zhuǎn)而使用插件安裝我這里安裝的是下面的這個(gè)版本使用全局導(dǎo)入樣式的話，我這里有用到分頁(yè)器，就在全局中引入了樣式組件引入在中使用常見的小圓點(diǎn) 移動(dòng)端輪播圖插件，在使用iview圖形界面插件中的carousel組件無(wú)法實(shí)現(xiàn)觸摸滑動(dòng)后，轉(zhuǎn)而使用vue-awesome-swiper插件 1.npm安裝 npm i vue-awesom...

    binta 評(píng)論0 收藏0

  • vue better-scroll 遇到的坑

    摘要：先看效果介紹一個(gè)簡(jiǎn)單的靜態(tài)頁(yè)面主要是使用做橫向滾動(dòng)，點(diǎn)擊標(biāo)簽滾動(dòng)到相應(yīng)位置，以及滾到相應(yīng)位置后對(duì)應(yīng)標(biāo)簽顯示紅色。 先看效果 showImg(https://segmentfault.com/img/bVbqAdC?w=374&h=626); 介紹 一個(gè)簡(jiǎn)單的靜態(tài)頁(yè)面主要是使用 better-scroll 做橫向滾動(dòng)，點(diǎn)擊標(biāo)簽滾動(dòng)到相應(yīng)位置，以及滾到相應(yīng)位置后對(duì)應(yīng)標(biāo)簽顯示紅色。開發(fā)過(guò)程中...

    yiliang 評(píng)論0 收藏0

  • vue全家桶仿某魚部分布局以及功能實(shí)現(xiàn)

    摘要：在這里簡(jiǎn)單敘述一下我仿某魚部分布局以及功能實(shí)現(xiàn)的過(guò)程，僅做學(xué)習(xí)用途。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫(kù)結(jié)合使用時(shí)，也完全能夠?yàn)閺?fù)雜的單頁(yè)面應(yīng)用提供驅(qū)動(dòng)。可以進(jìn)行確認(rèn)收貨后刪除訂單。 前言 每次寫文章時(shí)，總會(huì)覺(jué)得比寫代碼難多了，可能這就是我表述方面的不足吧，然而寫文章也是可以復(fù)盤一下自己的開發(fā)過(guò)程，對(duì)自己還是受益良多的。在這里簡(jiǎn)單敘述一下我仿某魚部分布局以及功能實(shí)現(xiàn)的過(guò)程，僅做...

    dreamGong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<