swiper鼠标经过切换对应轮播图

实现鼠标经过缩略图（分页器，也就是下面的小圆点）实现自动切换

直接上代码

<div id="gallery-thumbs"><div class="swiper-wrapper indexP-swiper-cont"><div class="swiper-slide indexP-swiper-items" data-index="1">这里是缩略图</div><div class="swiper-slide indexP-swiper-items" data-index="2">这里是缩略图</div><div class="swiper-slide indexP-swiper-items" data-index="3">这里是缩略图</div></div>
</div>

以上为缩略图部分的代码，swiper部分不需要任何改变。上面代码注释加了一个data-index，绑定到了dom元素上，不会用的自行度娘去。data-index用来当鼠标移入时候获取到它的值，然后传递给swiper的slideTo(index, speed, runCallbacks)方法，具体见slideTo详解，以下为js代码

var mySwiper = new Swiper("#gallery-top", {loop: true,autoplay: {delay: 3000,stopOnLastSlide: false,disableOnInteraction: false,},thumbs: {swiper: {el: "#gallery-thumbs",spaceBetween: 10,slidesPerView: 3,watchSlidesVisibility: true/*避免出现bug*/},slideThumbActiveClass: "my-slide-thumb-active"}});$(".indexP-swiper-items").hover(function(e) {// 取到绑定在indexP-swiper-items上的data-indexconsole.log(e.currentTarget.dataset.index);let indexTo = e.currentTarget.dataset.index;// 然后调用swiper的mySwiper.slideTo(index, speed, runCallbacks)mySwiper.slideTo(indexTo, 1000, false); //切换到第一个slide，速度为1秒},function(){// 鼠标移出回复自动轮播mySwiper.autoplay.start();});

swiper鼠标经过切换对应轮播图相关推荐

html js轮播图无白链接,JavaScript：100%原生js实现左右切换的轮播图(无延迟加载)...
简介这篇文章主要介绍了JavaScript:100%原生js实现左右切换的轮播图(无延迟加载)以及相关的经验技巧,文章约11114字,浏览量505,点赞数3,值得参考! *{ margin:0; pa ...
利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容
目标:利用swiper在vue中做轮播图,并改变轮播图的原有箭头.图片等内容. 实现效果:1.点击左右箭头可切换图片. 2.点击后图片出现最左侧样式效果,只有被点击的图片有此效果,不被点击恢复默认效果 ...
【QT学习】实现鼠标滑动触发的轮播图
文章目录前言一.实现效果二.实现原理 1.轮播窗口组成 2.标签控件作用 3.按钮控件作用 4.总体实现目标三.实现流程 1.实现步骤简述 2.编码前准备工作 3.创建轮播窗口类 4.初始化标 ...
微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
用js实现点击切换+自动切换的轮播图
用js实现点击切换+自动切换的轮播图之前博主写过一篇用css实现轮播图的文章,可以看到用css实现的轮播图也能实现我们所需要的功能.那么这些功能用js该如何实现呢?我们一起来看下吧! (ps:博主在 ...
使用CSS实现简单的图片切换（轮播图）
使用CSS实现简单的图片切换(轮播图) 预览图如下: 目录使用CSS实现简单的图片切换(轮播图) 一:首先创建基本布局 1:创建一个div容器 ,里面的ul与ol标签分别对应轮播图片和下方圆点: 二 ...
封装运动函数左右切换版本轮播图
运动函数需求: 当我点击 div 的时候, 让 div 定位到 left: 200px 的位置 1. 获取元素 2. 给元素绑定一个点击事件 3. 在点击事件里面, 给元素设置定位 3改. 调用运动 ...
纯css就能实现可点击切换的轮播图，feel起来很丝滑
前言轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...
HTML第三次作业——Tab切换和轮播图
第一题:完全模仿京东首页的每日特价专栏制作一个Tab切换效果,除了图片大小和图片具体内容不一样外,其它部分要求高仿,即内容部分也要求高仿,即也是由图片和文字的组合构成,最左边也是一张图片. 效果图:代 ...
定时器 — 图片自动切换（轮播图）
自动播放轮播图,鼠标放在图片上轮播停止:鼠标移开,继续轮播: 一种是打开页面就开始轮播: 另一种是打开图片过几秒再开始轮播(具体看下面js代码): html: <div id="pic ...

swiper鼠标经过切换对应轮播图

实现鼠标经过缩略图（分页器，也就是下面的小圆点）实现自动切换

swiper鼠标经过切换对应轮播图相关推荐

最新文章

热门文章