element+vue的轮播图自定义

    科技2022-07-20  103

    <template> <div class="app"> <!--轮播图--> <div > <el-row> <el-col :lg="14"> <img :src="showInfo.imgSrc"> </el-col> <el-col :offset="1" :lg="9"> <div style="height: 420px"> <div> <h3>{{showInfo.dairy}}</h3> <h1>{{showInfo.title}}</h1> <p>{{showInfo.content}}</p> </div> <div style="position: absolute;bottom:0;"> <el-button-group style="float: left;margin-left: 15px;margin-bottom: 10px"> <el-button icon="el-icon-arrow-left" ></el-button> <el-button icon="el-icon-arrow-right " @click="nextShowInfo"></el-button> </el-button-group> <p style="margin-left: 400px;margin-bottom: 0px">{{showInfo.id}}/{{showInfo.total}}</p> </div> </div> </el-col> </el-row> </div> <div></div> </div> </template> data() { return { showInfo:{ id: 1, imgSrc: require("../assets/images/img1.jpg"), dairy: '2020 /10 /4', title: '青衫烟雨客,似是故人来。', content: '你说帘外海棠,锦屏鸳鸯,后来庭院春深,咫尺画堂。你说笛声如诉,费尽思量,后来茶烟尚绿,人影茫茫' ,total:3 }, imgList: [{ id: 1, imgSrc: require("../assets/images/img1.jpg"), dairy: '2020 /10 /4', title: '青衫烟雨客,似是故人来。', content: '你说帘外海棠,锦屏鸳鸯,后来庭院春深,咫尺画堂。你说笛声如诉,费尽思量,后来茶烟尚绿,人影茫茫,' + '君不见青街雨巷,红尘巷陌;奈何无缘成叹,情深若何。君不见年华碧水,浅箫笙歌;奈何执念成绊,徒费消磨。' + '君不见碧玉流光,韶华浅落;然而年光渐逝,' + '不予共我。君不见三生石畔,噬爱成魔;然而流年空倚,岁月蹉跎。' }, { id: 2, imgSrc: require("../assets/images/img2.jpg"), dairy: '2020 /12 /5', title: '青衫烟雨客,似是故人来。', content: '你说帘外海棠,锦屏鸳鸯,后来庭院春深,咫尺画堂。你说笛声如诉,费尽思量,后来茶烟尚绿,人影茫茫' }, { id: 3, imgSrc: require("../assets/images/img3.jpg"), dairy: '2020 /12 /5', title: '青衫烟雨客,似是故人来。', content: '你说帘外海棠,锦屏鸳鸯,后来庭院春深,咫尺画堂。你说笛声如诉,费尽思量,后来茶烟尚绿,人影茫茫' } ] } }, methods:{ nextShowInfo(){//轮播图,下一个 console.log("next"); if(this.showInfo.id === this.showInfo.total){ let i = 1 this.showInfo.id=i this.showInfo.imgSrc=this.imgList[i-1].imgSrc this.showInfo.dairy=this.imgList[i-1].dairy this.showInfo.title=this.imgList[i-1].title this.showInfo.content=this.imgList[i-1].content } else { let i = this.showInfo.id i=i+1 this.showInfo.id=i this.showInfo.imgSrc=this.imgList[i-1].imgSrc this.showInfo.dairy=this.imgList[i-1].dairy this.showInfo.title=this.imgList[i-1].title this.showInfo.content=this.imgList[i-1].content } } }

     

    Processed: 0.010, SQL: 8