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.初始化swipervar 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很多功能还没有去探索，功能其实挺强大的。

swiper.js显示指定图片相关推荐

Swiper.js wap app 图片滑动效果
公司wap站改版,需要跟app保持一直,网上找了很多关于Swiper.js的信息,但是都是比较老的.最后找到了 http://www.idangero.us/swiper/demos/#.VY5mVv ...
JS 判断图片是否是否存在--不存在则显示默认图片
1.最简便的方法:使用 img 的 onerror 事件 https://www.jb51.net/article/8796.htm 正常显示前者,错误时显示后者 <img src=" ...
手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览源码下载实现的代码. html代码: <div ...
swiper.js 多图片页面的懒加载lazyLoading
swiper.js官网:http://www.swiper.com.cn/api/Images/2015/0308/213.html 设为true开启图片延迟加载,使preloadImages无效. ...
access找不到输入表或者dual_在Access窗体中显示指定路径的图片
↑↑↑点击上方图片,了解详情在Access中,如果把图形对象以OLE格式的字段保存,那么在窗体中可以直接显示出图片来.但是这样做有以下不足: 一.需要将图片逐一插入到表中,工作量太大. 二.使数据库 ...
html 全屏显示某个区域,JS实现指定区域的全屏显示功能示例
本文实例讲述了JS实现指定区域的全屏显示功能.分享给大家供大家参考,具体如下: www.jb51.net js指定区域全屏 #fulldiv { background: #fff; width: 10 ...
Vue.js项目中,当图片无法显示时则显示默认图片
Vue.js项目中,当图片无法显示时则显示默认图片使用onerror方法最近在学习Vue时,遇到了一个问题,就是从后台传过来的图片路径无效时,需要在页面显示默认图片本人试了3种方法,2种方法失败了 ...
html上传动态图片不显示图片,解决 viewer.js 动态更新图片导致无法预览的问题
前台页面要求图片的查看,是在表格中点击查看才弹出图片,网上发现用Viewer插件的挺多,就选用的这款插件,但是Viewer插件会产生缩略图,这里取巧了,将缩略图统一替换成了一个带有查看两字的小图片,这 ...
高德地图生成静态图片，显示指定经纬度的地图
最近接到一个地图需求,1.生成静态图片,2.显示指定经纬度的地图然后我结合需求sdkapi后,就确定了大概几个需求.本文只注明几个比较有用的地方,具体还得结合官方文档,普通不是专门以地图开发需求的a ...

swiper.js显示指定图片

swiper.js显示指定图片相关推荐

最新文章

热门文章