轮播图切换

 

<div class="showImg">

            <img v-for="(item, index) in imgArr"

                :key="item.id"

                :src="item.url"

                alt="暂无图片"

                v-show="currentIndex === index">

        </div>

        <div class="thumbnails">

            <div @click="clickIcon('left')" class="iconDiv icon-left"> &#8678; </div>

            <div class="thumbnail-image" v-for="(item, index) in imgArr" @click="changeImg(index)" :key="index">

                <img :src="item.url" :key="item.id">

            </div>

            <div @click="clickIcon('right')" class="iconDiv icon-right"> &#8680; </div>

        </div>

js：

 

 

data(){

            return {

                currentIndex :0,//当前所在图片下标

                timer:null,//定时轮询

                imgArr: [

                    {

                        id: 0,

                        url: "https://img2.baidu.com/it/u=2064684749,2471246240&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1691254800&t=c71923447b118f82348ee92510d807df",

                    },{

                        id: 1,

                        url: "https://img0.baidu.com/it/u=252500402,1876180326&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1691254800&t=ca445c47a67f971fff9924c5df779d32",

                    },{

                        id: 2,

                        url: "https://img0.baidu.com/it/u=2847626372,3815971220&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1691254800&t=a2ee5bcf3aa869e448cb9fc81b72ab1c",

                    },{

                        id: 3,

                        url: "https://img1.baidu.com/it/u=503749053,3199680348&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1691254800&t=c35d0585289a64125d400081a1eb328b",

                    },

                ]

            }

        },

        methods:{

                clickIcon(val){

                if(val === 'right'){

                    if(this.currentIndex < this.imgArr.length - 1){

                        this.currentIndex++;

                    }else{

                        this.currentIndex = 0;

                    }

                }else{

                    if(this.currentIndex > 0){

                        this.currentIndex--;

                    }else{

                        this.currentIndex = this.imgArr.length - 1;

                    }

                }

            },

            changeImg(index){

                this.currentIndex = index

            }

        }

css：

 

 

.showImg{

    position: relative;

    width: 40%;

    height: 250px;

    margin: 100px auto;

    overflow: hidden;

}

/* 轮播图片 */

.showImg img{

    width: 100%;

    height: 100%;

}

.thumbnails {

    display: flex;

    align-items: center;

}

.thumbnail-image img {

    height: 70px;

    width: auto;

    cursor: pointer;

}

.iconDiv {

    cursor: pointer;

}