swiper.js显示指定图片

之前开发没有用过swiper.js这个轮播插件，最近做了一个PC端网站正好用了用，就单纯的js来写了。好了，其他的话不多说，就直接说代码吧：
1.客户要求：右侧点击不同的选项，显示不同的数据，而图片是通过接口返回的。并且随着tab的切换也会显示不同的图片。
2.鼠标进入右侧新闻列表中，停在哪一项，哪一项的图片显示出来。
3.鼠标离开后轮播图继续自动播放。

	<div class="tongzhi">
	<div class="tongzhi_left">
			<div class="swiper mySwiper">
		<div class="swiper-wrapper" id="swiper">	
		</div>
	</div>
	</div>
	<div class="tongzhi_right">
		<div class="tongzhi_right_title">
			<span class="tongzhi_li_active" data-type="新闻资讯">新闻资讯</span>
			<span data-type="政策法规">政策法规</span>
			<span data-type="军创风采">军创风采</span>
		</div>
		<ul id="gonggaoList">
		</ul>
	</div>
	</div>

主要是说问题，其他的不必要的代码我就去掉了，主要是要说明指定index 显示对应的图片问题

//1.把图片数组中的图显示到swiper容器中
let swiper_all='';
				for(let j=0; j<imgarr.length; j++){
					let swiper_li=`<div class="swiper-slide">
				<img src="${imgarr[j]}" alt="">
			</div>`
			swiper_all+=swiper_li;
				}
        $('#swiper').html(swiper_all);
//2.初始化swiper
        var swiper = new Swiper(".mySwiper", {
          autoplay:true,
          speed:2000,
          observer: true,
          observeParents: true,
          on:{
            slideChangeTransitionEnd: function(){
              // alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide
            },
          }
        });

重点是这个地方

//鼠标进入，获取到当前的图片url，然后通过循环得到这个图片的下标值， 最后swiper.slideTo(swiperIndex); 来设置显示指定的这张图片
$('#gonggaoList').on('mouseenter','li',function(){
          let url=$(this).attr('data-url');
          for(let k=0; k<imgarr.length; k++){
            if(url==imgarr[k]){
              swiperIndex=k;
              swiper.slideTo(swiperIndex);    
            }
          }
        })
        $('#gonggaoList').on('mouseleave','li',function(){
          swiper.autoplay.start();
        })

swiper很多功能还没有去探索，功能其实挺强大的。