1. <i id="s6b2k"><small id="s6b2k"></small></i>
    <b id="s6b2k"><bdo id="s6b2k"></bdo></b>
  2. <wbr id="s6b2k"></wbr>

    Vue實現無縫輪播效果_vue.js

    來源:腳本之家  責任編輯:小易  

    本文實例為大家分享了Vue實現無縫輪播效果的具體代碼,供大家參考,具體內容如下

    代碼

    1.子組件代碼

    代碼如下(示例):

    <template>
      <div>
        <div class="box" @mouseenter="mouse" @mouseleave="mouseleave">
          <ul class="box1">
            <li>
              <img
                :src="n"
                v-for="(n, i) in imgs"
                :key="i"
                alt=""
                :style="{ left: (i - index) * 500 + 'px' }"
                :class="hasAni ? 'animaton' : ''"
              />
            </li>
          </ul>
          <p class="tt" @click="left">&lt;</p>
          <p class="tt1" @click="right">></p>
        </div>
      </div>
    </template>

    script代碼如下(示例):

    <script>
    export default {
      name: "Lunbo",
      props: ["imgs"],
      data() {
        return {
          // js中使用圖片,需要采用require導入
          index: 1,
          hasAni: true,
          istrue: true,
        };
      },
      methods: {
        mouse() {
          clearInterval(this.timer);
        },
        mouseleave() {
          this.timer = setInterval(() => {
            this.index++;
            this.hasAni = true;
            if (this.index == this.imgs.length - 1) {
              setTimeout(() => {
                this.index = 0;
                this.hasAni = false;
              }, 750);
            }
          }, 1500);
        },
        right() {
          if (this.istrue) {
            this.index++;
            this.hasAni = true;
            this.istrue = false;
            if (this.index == this.imgs.length - 1) {
              setTimeout(() => {
                this.index = 1;
                this.hasAni = false;
              }, 750);
            }
            setTimeout(() => {
              this.istrue = true;
            }, 1000);
          }
        },
        left() {
           if (this.istrue) {
            this.index--;
            this.hasAni = true;
            this.istrue = false;
            if (this.index == 0) {
              setTimeout(() => {
                this.index = this.imgs.length - 1;
                this.hasAni = false;
              }, 750);
            }
            setTimeout(() => {
              this.istrue = true;
            }, 1000);
          }
        },
      },
      activated() {
        console.log(1);
        this.timer = setInterval(() => {
          this.index++;
          this.hasAni = true;
          if (this.index == this.imgs.length - 1) {
            setTimeout(() => {
              this.index = 0;
              this.hasAni = false;
            }, 750);
          }
        }, 1500);
      },
      decativated() {
        clearInterval(this.timer);
      },
    };
    </script>

    css

    <style scoped>
    p {
      width: 30px;
      height: 60px;
      background-color: rgba(46, 139, 86, 0.356);
      line-height: 60px;
      font-size: 24px;
      position: absolute;
      top: 105px;
    }
    .tt {
      left: 0;
    }
    .tt1 {
      right: 0;
    }
    .box {
      width: 500px;
      height: 300px;
      margin: 100px auto;
      position: relative;
      overflow: hidden;
    }
    .box1 img {
      position: absolute;
      left: 0px;
      top: 0;
      width: 500px;
      height: 300px;
    }
    .animaton {
      transition: left 0.75s;
    }
    </style>

    2.父組件代碼

    父組件

    <keep-alive>
          <Lunbo :imgs="imgs" />
    </keep-alive>

    導入模塊

    import Lunbo from "./components/Lunbo";

    圖片數據

    data() {
        return {
          imgs:[
            require("./assets/6.jpg"),
            require("./assets/1.jpg"),
            require("./assets/2.jpg"),
            require("./assets/3.jpg"),
            require("./assets/4.jpg"),
            require("./assets/5.jpg"),
            require("./assets/6.jpg"),
            require("./assets/1.jpg"),
          ],
        }


  3. 本文相關:
  4. 詳解vue使用 vue-cli 搭建項目
  5. 詳解vue中的自定義指令
  6. vue-quill-editor實現圖片上傳功能
  7. vue中使用vux配置代碼詳解
  8. vue組件中的樣式屬性scoped實例詳解
  9. 修改vue打包后的默認文件名操作
  10. windows下vue-cli導入bootstrap樣式
  11. vue學習筆記之v-if和v-show的區別
  12. 當vue路由變化時,改變導航欄的樣式方法
  13. vue 路由嵌套高亮問題的解決方法
  14. vue中怎么做的無縫滾動?詳細些,帶代碼
  15. vue.js怎么實現圖片輪播?就是一個圖片隔一秒換一...
  16. 怎么使用vue.js做一個類似swipe效果
  17. 怎么使用vuejs做一個類似swipe效果
  18. vue.js怎么實現這種切換功能
  19. 用vue.js能寫上下滾動效果么
  20. vuejs 自定義指令 怎么輪播圖功能或者記錄滾動條的...
  21. 如何實現vue里面的scroll事件附帶動畫效果
  22. vue.js 怎么綁輪播接口數據
  23. 哪位大神有沒有用vue自己寫的比較完整的輪播圖組件
  24. 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全yui.ext相關prototypejqueryangularjsjsonlib_jsjs面向對象extjsmootoolsseajsdojovue.jsbackbone.jsreact其它首頁javascriptjavascript類庫使用vue制作圖片輪播組件思路詳解基于vue.js實現圖片輪播效果基于vue.js輪播組件vue-awesome-swiper實現輪播圖vue 過渡實現輪播圖效果vue中引用swiper輪播插件的教程詳解vue.js整合mint-ui里的輪播圖實例代碼vue.js實現簡單輪播圖效果vue輪播圖插件vue-concise-slider的使用利用vue實現移動端圖片輪播組件的方法實例vue.js+elementui實現點擊左右箭頭切換頭像功能(類似輪播圖效果)詳解vue使用 vue-cli 搭建項目詳解vue中的自定義指令vue-quill-editor實現圖片上傳功能vue中使用vux配置代碼詳解vue組件中的樣式屬性scoped實例詳解修改vue打包后的默認文件名操作windows下vue-cli導入bootstrap樣式vue學習筆記之v-if和v-show的區別當vue路由變化時,改變導航欄的樣式方法vue 路由嵌套高亮問題的解決方法vue引用js文件的多種方式(推薦)詳解vue 路由跳轉四種方式 (帶參vue之父子組件間通信實例講解(prvue props用法詳解(小結)vue項目刷新當前頁面的三種方法簡單理解vue中props屬性vue元素的隱藏和顯示(v-show指令vue實現文件上傳功能使用vue實現圖片上傳的三種方式element-ui中select組件綁定值改vue-父子組件和ref實例詳解vue頁面中通過雙擊實現復制表格中內容的示解決vuex改變了state的值,但是頁面沒有更vue echarts實現可視化世界地圖代碼實例淺談ant design pro 菜單自定義 iconvue + vue-router 同名路由切換數據不更新vue中如何引入jquery和bootstrap基于vue和bootstrap實現簡單留言板功能基于vue-video-player自定義播放器的方法windows下vue-cli導入bootstrap樣式
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.yu113.com All Rights Reserved
    战天txt全集下载