Vue.js 簡易漸變輪播圖
阿新 • • 發佈：2019-01-28
直接將樣式和Vue屬性方法複製到自己的頁面即可使用，注意可能會發生的衝突。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
*{
margin: 0;
padding: 0;
}
.VLgradualPic img{
position: absolute;
width: 100%;
height: 100%;
/*因為是背景圖片，所以絕對定位+全螢幕*/
}
.VLgradualPicTransition-enter-active, .VLgradualPicTransition-leave-active {
transition: opacity 2.7s;
/*一個漸變動畫的時間*/
}
.VLgradualPicTransition-enter, .VLgradualPicTransition-leave-to{
opacity: 0;
}
body{
background-color: black;
/*漸變時畫面空白部分的顏色*/
}
</style>
<div class="app">
<div class="VLgradualPic">
<transition name="VLgradualPicTransition">
<div v-if="VueLibrary.gradualPic.backgroundPic1">
<img src="static/img/backgroundPic1.jpg">
<!--這裡換成你自己的圖片-->
</div>
</transition>
<transition name="VLgradualPicTransition">
<div v-if="VueLibrary.gradualPic.backgroundPic3">
<img src="static/img/backgroundPic2.jpg">
</div>
</transition>
<transition name="VLgradualPicTransition">
<div v-if="VueLibrary.gradualPic.backgroundPic2">
<img src="static/img/backgroundPic3.jpg">
</div>
</transition>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script>
var app = new Vue({
el:".app",
data:{
VueLibrary:{
gradualPic:{backgroundPic1:true,backgroundPic2:false,backgroundPic3:false,
VLswitchGradualBackground:function(){}},
},
},
});
///////////////////////////////////////////////////////////////////////////////////////
app.VueLibrary.gradualPic.VLswitchGradualBackground=
function(){//單個bool型別資料可以這麼寫，圖片非常多的情況下建議用計數器+bool陣列實現
if(app.VueLibrary.gradualPic.backgroundPic1){
app.VueLibrary.gradualPic.backgroundPic1=false;
app.VueLibrary.gradualPic.backgroundPic2=true;
}else if(app.VueLibrary.gradualPic.backgroundPic2){
app.VueLibrary.gradualPic.backgroundPic2=false;
app.VueLibrary.gradualPic.backgroundPic3=true;
}else if(app.VueLibrary.gradualPic.backgroundPic3){
app.VueLibrary.gradualPic.backgroundPic1=true;
app.VueLibrary.gradualPic.backgroundPic3=false;
}
setTimeout("app.VueLibrary.gradualPic.VLswitchGradualBackground();",3800);
//每次漸變完成後設定下次漸變
},
setTimeout("app.VueLibrary.gradualPic.VLswitchGradualBackground();",2200);
</script>
</body>
</html>