本文介紹了vue不操作dom實(shí)現(xiàn)圖片輪播的示例代碼，分享給大家，具體如下：
創(chuàng)新互聯(lián)公司是一家專業(yè)提供江海企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、做網(wǎng)站、H5網(wǎng)站設(shè)計(jì)、小程序制作等業(yè)務(wù)。10年已為江海眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。
效果
寬度為1190px且水平居中的輪播盒子；
中間是當(dāng)前顯示的默認(rèn)尺寸圖片；
左右兩邊是預(yù)顯示的小尺寸圖片；
輪播從右至左，圖片逐漸放大。
做普通平滑輪播也可以參照這個(gè)思路
html
css
我們要寫上三個(gè)li不同位置的樣式和一個(gè)li默認(rèn)位置的的樣式。
分別是：
左邊位置的dom樣式；
中間位置的dom樣式；
右邊位置的dom樣式；
默認(rèn)位置的dom樣式。
其中，默認(rèn)的dom隱藏在中間展示的dom下面。
看圖：
圖中：
ul的樣式：
重慶分公司
重慶分公司
ul {
position: relative;
width: 1190px;
height: 500px;
margin: 0 auto;
display: flex;
}紫色部分是默認(rèn)的li的dom樣式，設(shè)置在整個(gè)ul水平且垂直居中的位置
ul > li {
position: absolute;
width: 480px;
min-width: 480px;
height: 400px;
top: 50px;
bottom: 50px;
left: 355px;
font-size: 0; /* 去除img標(biāo)簽留白，與輪播無關(guān) */
overflow: hidden;
background: white;
box-shadow: 0 0 10px 0 #dddddd;
transition: 0.6s;
z-index: 1;
}紅色部分是左邊的li的dom樣式，設(shè)置在整個(gè)ul水平靠左、垂直居中的位置
ul > .demo-left {
left: 0;
z-index: 2;
}黑色部分是中間需要展示的li的dom樣式，設(shè)置在整個(gè)ul水平靠右、垂直居中的位置
ul > .demo-active {
width: 600px;
min-width: 600px;
height: 500px;
top: 0;
bottom: 0;
left: 295px;
z-index: 3;
}藍(lán)色部分是右邊的li的dom樣式，設(shè)置在整個(gè)ul水平靠右、垂直居中的位置
ul > .demo-right {
left: 710px;
z-index: 2;
}圖片水平且垂直居中，可自定義設(shè)置，與輪播無關(guān)
ul > li > img {
position: absolute;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}vue
export default {
name: "demo",
data() {
return {
demoList: [ // 圖片列表
{
id: "1",
src: "圖片路徑"
},
{
id: "2",
src: "圖片路徑"
},
{
id: "3",
src: "圖片路徑"
},
{
id: "4",
src: "圖片路徑"
},
{
id: "5",
src: "圖片路徑"
}
],
demoActive: 0, // 當(dāng)前顯示的li下標(biāo)，設(shè)置為0，表示首次加載顯示第一張圖片
demoTimer: null // 定時(shí)器，聲明demoTimer方便停止輪播和重新開始輪播
}
},
methods: {
// 根據(jù)返回值給li添加className
demoStyle(index) {
if (index == this.demoActive - 1) return 0;
if (index == this.demoActive ) return 1;
if (index == this.demoActive + 1) return 2;
if (this.demoActive == 0 && index == this.demoList.length - 1) return 0;
if (this.demoActive == this.demoList.length - 1 && index == 0) return 2;
},
// 輪播執(zhí)行
demoCarousel() {
this.demoActive++;
if (this.demoActive > this.demoList.length - 1) {
this.demoActive= 0;
}
}
},
mounted() {
let _self = this;
_self.$nextTick(function () {
// 開始輪播，3秒一次
_self.demoTimer = setInterval(_self.demoCarousel, 3000);
});
}
}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
