博客

我是在html页面用的swiper插件，如果是用vue或者react应该会更好实现

一、实现方法

1.首先获取需要轮播的图片数组；
2.再定义一个需要默认展示的图片地址；
3.然后通过indexof获取此图片地址在图片数组的下标；
4.最后通过swiper.slideTo(index)跳转即可；

二、代码展示

            var swiper1 = new Swiper('.swiper-container1', {
                pagination: {
                    el: '.swiper-pagination',
                    type: 'fraction',
                },
                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                centeredSlides: true,
                // slidesPerView: 'auto',
                loop: false,
                spaceBetween: 10, //间距px
                observer: true, //修改swiper自己或子元素时，自动初始化swiper
                observeParents: true, //修改swiper的父元素时，自动初始化swiper
                on: {
                    slideChangeTransitionEnd: function () {
                        console.log("滑动结束");
                        console.log(swiper1, this.activeIndex)
                    },
                },
            });
            //这里开始默认显示某张图片
            // 首先获取当前轮播的所有图片（如果是vue，即在data里面定义的图片数组）
            let arr = document.getElementsByClassName('img-block')
            let url = './images/tel.png' //需要默认展示的图片地址
            let imgarr = [] //图片数组
            for (var i = 0; i < arr.length; i++) {
                imgarr.push($(arr[i]).attr('src'))
            }
            var index = imgarr.indexOf(url) //获取图片数组中需要默认展示的图片的下标
            swiper1.slideTo(index);