1. IT分享知识网首页
  2. 开发语言
  3. Vue

Vue轮播图实现

老牧童 • • Vue • 阅读 287

Vue轮播图实现轮播图有大部分代码是是根据网上仿写参考写出来的。写轮播图步骤：写好样式以后先给轮播图定时，也就是先让轮播图动起来。<ul><liv-for="(item,index)inBannerList":key="index"v-sh

大家好，欢迎来到IT知识分享网。Vue轮播图实现

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="listIndex===index? '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.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="listIndex===index? '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.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="listIndex===index? '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,
        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.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>

 

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/31295.html

赞 (0)
老牧童老牧童
0
上一篇 2023-10-31 16:45
下一篇 2023-11-05 20:15

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信