基于vue双向绑定实现banner

基于vue双向绑定实现banner

HTML

<div id="app">
<!--    <button @click="dayin">dayin</button>-->
    <div class="container" @mouseover="mouseOver" @mouseleave="mouseLeave">
        <img :src="bannerSrc" alt="banner">
        <div class="buttons">
            <span v-for="(item,index) in bannerList">
                <i @click="currentIndex = index" :class="{buttonsActive:currentIndex===index}"></i>
            </span>
        </div>
        <div class="btn">
            <a href="javascript:" class="arrow arrow_left" @click="arrow_left">	&lt;</a>
            <a href="javascript:" class="arrow arrow_right" @click="arrow_right">&gt;</a>
        </div>
    </div>
</div>

css部分

部分样式经供参考

.container {
        position: relative;
    }

    @media only screen and (min-width: 980px) {
        .container img{
            height: 400px!important;
        }
    }
    .container img {
        width: 100vw;
        height: 200px;
    }
    .buttons{
        position: absolute;
        bottom: 10px;
        left: 5%;
    }
    .buttons span i{
        border-radius: 20px;
        display: inline-block;
        width: 12px;
        margin-right: 3px;
        height: 7px;
        color: #fff;
        background: #0000004d;
    }
    .btn{
        position: absolute;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100%;
        top: 0;
    }
    .btn .arrow{
        text-align: center;
        width: 50px;
        background: #00000014;
        color: #fff;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .arrow_left{
    }
    .buttonsActive{
        background: #00FFFF!important;
    }

js代码

图片资源来源百度，可自行替换

new Vue({
        el: '#app',
        data() {
            return {
                bannerList: [
                    {
                        competitionName: "",
                        id: "1001",
                        image: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4162445053,2546002684&fm=26&gp=0.jpg",
                    },
                    {
                        competitionName: "",
                        id: "1002",
                        image: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=450228089,3926595171&fm=26&gp=0.jpg",
                    },
                    {
                        competitionName: "",
                        id: "1003",
                        image: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2682036840,343048928&fm=26&gp=0.jpg",
                    },
                    {
                        competitionName: "",
                        id: "1004",
                        image: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4215416702,1458152764&fm=26&gp=0.jpg",
                    },
                    {
                        competitionName: "",
                        id: "1004",
                        image: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3532249801,4016244769&fm=26&gp=0.jpg",
                    },
                ],
                // bannerSrc: "",
                currentIndex: 0,
                timer: " ",
            }
        },
        computed:{
            bannerSrc(){
                return this.bannerList[this.currentIndex].image
            }
        },
        created() {
            this.setInterval()
        },
        methods: {
            dayin(){
                console.log(this.bannerSrc)
                console.log(this.currentIndex)
            },
            arrow_left(){
                if(this.currentIndex > 0){
                    this.currentIndex --
                }else {
                    this.currentIndex = this.bannerList.length - 1
                }
                this.dayin()
            },
            arrow_right(){
                if (this.currentIndex < this.bannerList.length - 1) {
                    this.currentIndex ++
                } else {
                    this.currentIndex = 0
                }
                this.dayin()
            },
            setInterval(){
                this.timer = setInterval(() => {
                    if (this.currentIndex < this.bannerList.length - 1) {
                        this.currentIndex ++
                    } else {
                        this.currentIndex = 0
                    }
                    // this.bannerSrc = this.bannerList[this.currentIndex].image
                },2000)
            },
            mouseOver(){
                clearInterval(this.timer)
            },
            mouseLeave(){
                this.setInterval()
            }
        },
    })