Vue轮播图（瑕疵版）
作者：互联网
先上图片样式，瑕疵就是图片上的小圆点不随图片的变换而变换，但是能够切换图片。这就是瑕疵的地方。
轮播图有大部分代码是是根据网上参考写出来的。
写轮播图步骤：
写好样式以后先给轮播图定时，也就是先让轮播图动起来。
<ul>
<li v-for="(item,index) in BannerList" :key="index" v-show="listIndex===index" >
<a href="">
<img :src="item.BannerUrl" alt="">
</a>
</li>
</ul>
export default {
data() {
return {
BannerList:[
{BannerUrl: require("../../assets/img/18.jpg"),id:1},
{BannerUrl: require("../../assets/img/19.jpg"),id:2},
{BannerUrl: require("../../assets/img/20.jpg"),id:3},
{BannerUrl: require("../../assets/img/21.jpg"),id:4},
{BannerUrl: require("../../assets/img/22.jpg"),id:5}
],
listIndex:0,
timer:null,
}
},
created(){
this.setTimer();
},
computed:{
},
methods:{
setTimer(){
clearInterval(this.timer);
this.timer=setInterval(()=>{
this.listIndex++;
if(this.listIndex==this.BannerList.length){
this.listIndex=0
}
},8000)
},
},
mounted(){
}
}
第二步：再给轮播图添加左右切换按钮。
<div class="news-home-main-banner">
<ul>
<li v-for="(item,index) in BannerList" :key="index" v-show="listIndex===index" >
<a href="">
<img :src="item.BannerUrl" alt="">
</a>
</li>
</ul>
<ol>
<li>
<span @click="changePage(prev)"></span>
</li>
</ol>
<ol>
<li>
<span @click="changePage(next)"></span>
</li>
</ol>
</div>
export default {
data() {
return {
BannerList:[
{BannerUrl: require("../../assets/img/18.jpg"),id:1},
{BannerUrl: require("../../assets/img/19.jpg"),id:2},
{BannerUrl: require("../../assets/img/20.jpg"),id:3},
{BannerUrl: require("../../assets/img/21.jpg"),id:4},
{BannerUrl: require("../../assets/img/22.jpg"),id:5}
],
listIndex:0,
timer:null,
}
},
created(){
this.setTimer();
},
computed:{
prev(){
if(this.listIndex==0){
return this.BannerList.length-1;
}else{
return this.listIndex-1
}
},
next(){
if(this.listIndex==this.BannerList.length-1){
return 0
}else{
return this.listIndex+1
}
}
},
methods:{
changePage(index){
this.listIndex=index
},
setTimer(){
clearInterval(this.timer);
this.timer=setInterval(()=>{
this.listIndex++;
if(this.listIndex==this.BannerList.length){
this.listIndex=0
}
},8000)
},
},
mounted(){
}
}
第三步：给Vue轮播图添加圆点切换按钮
<div class="news-home-main-banner">
<ul>
<li v-for="(item,index) in BannerList" :key="index" v-show="listIndex===index" >
<a href="">
<img :src="item.BannerUrl" alt="">
</a>
</li>
</ul>
<ol>
<li>
<span @click="changePage(prev)"></span>
</li>
</ol>
<ol>
<li>
<span @click="changePage(next)"></span>
</li>
</ol>
<ul>
<li v-for="(item,index) in BannerList" :key="index" @click="changeBtn(index)" :class="index===curcurIndex? 'active':''">
<span>{{item.id}}</span>
</li>
</ul>
</div>
export default {
data() {
return {
BannerList:[
{BannerUrl: require("../../assets/img/18.jpg"),id:1},
{BannerUrl: require("../../assets/img/19.jpg"),id:2},
{BannerUrl: require("../../assets/img/20.jpg"),id:3},
{BannerUrl: require("../../assets/img/21.jpg"),id:4},
{BannerUrl: require("../../assets/img/22.jpg"),id:5}
],
listIndex:0,
curcurIndex:0,
timer:null,
}
},
created(){
this.setTimer();
},
computed:{
prev(){
if(this.listIndex==0){
return this.BannerList.length-1;
}else{
return this.listIndex-1
}
},
next(){
if(this.listIndex==this.BannerList.length-1){
return 0
}else{
return this.listIndex+1
}
}
},
methods:{
changePage(index){
this.listIndex=index
},
out(){
this.setTimer()
},
over(){
clearInterval(this.timer)
},
setTimer(){
clearInterval(this.timer);
this.timer=setInterval(()=>{
this.listIndex++;
if(this.listIndex==this.BannerList.length){
this.listIndex=0
}
},8000)
},
changeBtn(index){
this.curcurIndex=index
this.listIndex=index
},
},
mounted(){
}
}
第三步的圆点切换可以看成是Vue的tab切换。Vue的tab切换和这里的圆点切换是一样的。
第四步：给轮播图添加鼠标移入暂停。
<div class="news-home-main-banner">
<ul>
<li v-for="(item,index) in BannerList" :key="index" v-show="listIndex===index" @mouseover="changeMouse(true)" @mouseleave="changeMouse(false)">
<a href="">
<img :src="item.BannerUrl" alt="">
</a>
</li>
</ul>
<ol>
<li>
<span @click="changePage(prev)"></span>
</li>
</ol>
<ol>
<li>
<span @click="changePage(next)"></span>
</li>
</ol>
<ul>
<li v-for="(item,index) in BannerList" :key="index" @click="changeBtn(index)" :class="index===curcurIndex? 'active':''">
<span>{{item.id}}</span>
</li>
</ul>
</div>
export default {
data() {
return {
BannerList:[
{BannerUrl: require("../../assets/img/18.jpg"),id:1},
{BannerUrl: require("../../assets/img/19.jpg"),id:2},
{BannerUrl: require("../../assets/img/20.jpg"),id:3},
{BannerUrl: require("../../assets/img/21.jpg"),id:4},
{BannerUrl: require("../../assets/img/22.jpg"),id:5}
],
listIndex:0,
curcurIndex:0,
timer:null,
}
},
created(){
this.setTimer();
},
computed:{
prev(){
if(this.listIndex==0){
return this.BannerList.length-1;
}else{
return this.listIndex-1
}
},
next(){
if(this.listIndex==this.BannerList.length-1){
return 0
}else{
return this.listIndex+1
}
}
},
methods:{
changePage(index){
this.listIndex=index
},
out(){
this.setTimer()
},
over(){
clearInterval(this.timer)
},
setTimer(){
clearInterval(this.timer);
this.timer=setInterval(()=>{
this.listIndex++;
if(this.listIndex==this.BannerList.length){
this.listIndex=0
}
},8000)
},
changeBtn(index){
this.curcurIndex=index
this.listIndex=index
},
changeMouse(mouser){
if(mouser){
clearInterval(this.timer)
}else{
this.setTimer()
}
}
},
mounted(){
this.setTimer()
}
}
第五步应该是圆点样式跟随轮播图变换而变换的。但现在还没解决。因此有瑕疵。
附完整代码：
HTML：
<template>
<div class="news-home-main-banner-wrap">
<div class="news-home-main-banner">
<ul>
<li v-for="(item,index) in BannerList" :key="index" v-show="listIndex===index" @mouseover="changeMouse(true)" @mouseleave="changeMouse(false)">
<a href="">
<img :src="item.BannerUrl" alt="">
</a>
</li>
</ul>
<ol>
<li>
<span @click="changePage(prev)"></span>
</li>
</ol>
<ol>
<li>
<span @click="changePage(next)"></span>
</li>
</ol>
<ul>
<li v-for="(item,index) in BannerList" :key="index" @click="changeBtn(index)" :class="index===curcurIndex? 'active':''">
<span>{{item.id}}</span>
</li>
</ul>
</div>
</div>
</template>
JavaScript：
<script>
export default {
data() {
return {
BannerList:[
{BannerUrl: require("../../assets/img/18.jpg"),id:1},
{BannerUrl: require("../../assets/img/19.jpg"),id:2},
{BannerUrl: require("../../assets/img/20.jpg"),id:3},
{BannerUrl: require("../../assets/img/21.jpg"),id:4},
{BannerUrl: require("../../assets/img/22.jpg"),id:5}
],
listIndex:0,
curcurIndex:0,
timer:null,
}
},
created(){
this.setTimer();
},
computed:{
prev(){
if(this.listIndex==0){
return this.BannerList.length-1;
}else{
return this.listIndex-1
}
},
next(){
if(this.listIndex==this.BannerList.length-1){
return 0
}else{
return this.listIndex+1
}
}
},
methods:{
changePage(index){
this.listIndex=index
},
out(){
this.setTimer()
},
over(){
clearInterval(this.timer)
},
setTimer(){
clearInterval(this.timer);
this.timer=setInterval(()=>{
this.listIndex++;
if(this.listIndex==this.BannerList.length){
this.listIndex=0
}
},8000)
},
changeBtn(index){
this.curcurIndex=index
this.listIndex=index
},
changeMouse(mouser){
if(mouser){
clearInterval(this.timer)
}else{
this.setTimer()
}
}
},
mounted(){
this.setTimer()
}
}
</script>
CSS:
<style lang="css" scoped>
.news-home-main-banner-wrap{
height: 220px;
width: 440px;
border-radius: 10px;
overflow: hidden;
}
.news-home-main-banner{
position: relative;
width: 440px;
height: 220px;
}
.news-home-main-banner ul:nth-child(1) {
display: flex;
justify-content: flex-start;
}
.news-home-main-banner ul:nth-child(1) li a img{
height: 220px;
width: 440px;
}
.news-home-main-banner ol{
position: absolute;
top: 50%;
}
.news-home-main-banner ol:nth-child(2){
left: 10px;
}
.news-home-main-banner ol:nth-child(3){
right: 10px;
}
.news-home-main-banner ol li span{
display: block;
height: 20px;
width: 20px;
border-top: 4px solid #ffffff;
border-right: 4px solid #ffffff;
// background: #FA857F;
opacity: 0.8;
}
.news-home-main-banner ol:nth-child(2) li span{
transform: rotate(-135deg);
// border-radius: 12px 0 12px 12px;
}
.news-home-main-banner ol:nth-child(3) li span{
transform: rotate(45deg);
// border-radius: 12px 0 12px 12px;
}
.news-home-main-banner ul:nth-child(4) {
position: absolute;
right: 10px;
bottom: 5px;
display: flex;
justify-content: center;
}
.news-home-main-banner ul:nth-child(4) li{
height: 26px;
width: 26px;
border-radius: 12px;
margin: 0 5px;
opacity: 0.8;
cursor: pointer;
}
.news-home-main-banner ul:nth-child(4) li span{
display: block;
height: 22px;
width: 22px;
margin: 2px;
border-radius: 11px;
text-align: center;
line-height: 22px;
background: #ffffff;
opacity: 0.8;
color: #ffffff;
font-weight: bold;
}
.active{
background: #FA857F;
}
</style>
标签：Vue,轮播,..,瑕疵,require,img,BannerUrl,id,listIndex 来源： https://www.cnblogs.com/treelome/p/16433781.html