Vue實(shí)現(xiàn)無(wú)縫輪播效果
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)無(wú)縫輪播效果的具體代碼,供大家參考,具體內(nèi)容如下
代碼
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"><</p> <p class="tt1" @click="right">></p> </div> </div> </template>
script代碼如下(示例):
<script> export default { name: "Lunbo", props: ["imgs"], data() { return { // js中使用圖片,需要采用require導(dǎo)入 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>
導(dǎo)入模塊
import Lunbo from "./components/Lunbo";
圖片數(shù)據(jù)
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"), ], }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 使用Vue制作圖片輪播組件思路詳解
- 基于vue.js實(shí)現(xiàn)圖片輪播效果
- 基于vue.js輪播組件vue-awesome-swiper實(shí)現(xiàn)輪播圖
- Vue 過(guò)渡實(shí)現(xiàn)輪播圖效果
- vue中引用swiper輪播插件的教程詳解
- vue.js整合mint-ui里的輪播圖實(shí)例代碼
- vue.js實(shí)現(xiàn)簡(jiǎn)單輪播圖效果
- vue輪播圖插件vue-concise-slider的使用
- 利用Vue實(shí)現(xiàn)移動(dòng)端圖片輪播組件的方法實(shí)例
- vue.js+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換頭像功能(類(lèi)似輪播圖效果)
相關(guān)文章
vue實(shí)現(xiàn)帶小數(shù)點(diǎn)的星星評(píng)分
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)帶小數(shù)點(diǎn)的星星評(píng)分,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09Vue3中provide和inject作用和場(chǎng)景
Vue3中provide和inject作用和場(chǎng)景是頂層組件向任意的底層組件傳遞數(shù)據(jù)和方法,實(shí)現(xiàn)跨層組件通信,本文通過(guò)實(shí)例介紹Vue3 provide和inject的相關(guān)知識(shí),感興趣的朋友一起看看吧2023-11-11vue插件vue-resource的使用筆記(小結(jié))
本篇文章主要介紹了vue插件vue-resource的使用筆記(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08詳解vue數(shù)據(jù)渲染出現(xiàn)閃爍問(wèn)題
本篇文章主要介紹了vue數(shù)據(jù)渲染出現(xiàn)閃爍問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06vue中回調(diào)函數(shù)(callback)的用法舉例
這篇文章主要給大家介紹了關(guān)于vue中回調(diào)函數(shù)(callback)的用法舉例,所謂的回調(diào)函數(shù),就是由調(diào)用函數(shù)提供執(zhí)行代碼,被調(diào)用函數(shù)執(zhí)行完畢之后,再自動(dòng)執(zhí)行的一個(gè)函數(shù),需要的朋友可以參考下2023-08-08elementui中el-row的el-col排列混亂問(wèn)題及解決
這篇文章主要介紹了elementui中el-row的el-col排列混亂問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08Vue 項(xiàng)目代理設(shè)置的優(yōu)化
這篇文章主要介紹了Vue 項(xiàng)目代理設(shè)置的優(yōu)化功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽頁(yè)以及右鍵菜單功能
這篇文章主要給大家介紹了關(guān)于Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽頁(yè)以及右鍵菜單功能的相關(guān)資料,Vue?3和Element?Plus提供了一種簡(jiǎn)單的方法來(lái)實(shí)現(xiàn)側(cè)邊菜單欄與標(biāo)簽頁(yè)之間的聯(lián)動(dòng),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09