swiper 增加一个鼠标移入分页器的小点后就切换展示图片

本人处理的方法是:

1、头部加载插件:
<link rel="stylesheet" href="swiper.min.css">
<script src="swiper.min.js"></script>

2、html部分:

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
   </div>
  <!-- 如果需要分页器 -->
  <div class="swiper-pagination"></div>
</div>

3、js部分:
$(document).ready(function() {
      var mySwiper = new Swiper(‘.swiper-container‘, {
        loop:true,
        autoplay:true,
        pagination: {
          el: ‘.swiper-pagination‘,
          clickable: true,
        }
      });
      //此方法为模拟的,hover到分页器的小圆点后自动触发其本身的click事件
      $(".swiper-pagination-bullet").hover(function() {
          $(this).click(); //鼠标划上去之后,自动触发点击事件来模仿鼠标划上去的事件
      },function() {
          mySwiper.autoplay.start(); //鼠标移出之后,自动轮播开启
      })
    })
大神绕道,不喜勿喷。

原文地址:https://www.cnblogs.com/TMM-eng/p/9283611.html

时间: 2024-08-04 04:36:11

swiper 增加一个鼠标移入分页器的小点后就切换展示图片的相关文章

在imageView依次加入7个手势, 1.点击哪个button,往imageView上加入哪个手势.(保证视图上仅仅有一个手势). 2.轻拍:点击视图切换美女图片.(imageView上首先展示的美女

// // ControlView.h // HomeworkGestureRecognizer // // Created by lanouhn on 14-8-27. // Copyright (c) 2014年 [email protected] 陈聪雷. All rights reserved. // #import <UIKit/UIKit.h> @interface ControlView : UIView @property (nonatomic, retain) NSMutab

jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类

jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类 本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="arrowlistmenu"> <h3 class="menuheader expandable">表单</h3> <ul class="categoryitems"> <li><a href="

Java实现点击一个Jlabel增加一个Jlabel的小功能

当界面生成以后,自己想做一个点击一个Jlabel增加一个Jlabel,即类似于QQ的添加好友以后可以及时的加进一个好友.自己做了好久,发现不能及时刷新.在网上查了一下,然后自己研究了一小会.发现需要validate这个函数重新布局.写了一个这个小功能. package qq.client.tools; import java.awt.event.MouseEvent; import java.awt.event.MouseListener; import javax.swing.JFrame;

判断鼠标移入移出元素时的方向

本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路.这个方法可以帮助你判断鼠标在移入移出时,是从上下左右的哪个方向发生的.这个思路,是我自己琢磨出来,利用了一点曾经高中学过的数学知识,但是非常简单好理解,希望能对你有所帮助. 在线demo: http://liuyunzhuge.github.io/blog/mouse_direction/demo1.html 相关代码: https://github.com/liuyunzhuge/blog/blob/master/mouse_

使用JS制作一个鼠标可拖的DIV(四)——缩放

原理与鼠标拖动 DIV 相同. 下面就先实现一个在DIV的右上角显示一个小正方形(类似). 当鼠标按下并拖动时,DIV会以要拖动的元素的左下角的坐标点定位,根据鼠标的拖动,按比例的扩大或缩小. 一.思路 1.鼠标按时事件. 这里要初始化数据. 同移动一样,给小正方形绑定鼠标按时事件. (1)获得并保存要移动的元素(parent)的宽(parentWidth)与高(parentHeight). 即:元素缩放前的宽与高. (2)由于是要按比例缩放,所以,要在这时计算出宽与高的比例(scale),得到

angular 鼠标移入事件(动态添加类名)

不会弄动态图上来,只好截图了= = 大致就是这个样子,鼠标移入微博或者微信的框框里,就切换到相应的样式类名.图片.文字 原理:主要是做判断,判断true||false,然后根据它的布尔值来动态改变元素样式 html代码如下 绿色标记字体  属于写好了脚本之后注入的依赖,现在可不看 1 <div id="switch" switch=""> //将写好的依赖注入进去 2 <button class="switch" ng-clas

JS实现鼠标移入标签页的完整title提示

一.条件 1.在鼠标移入标签上时可以捕获到 title 对象身上触发的事件: 2.网页标签不在页面的范围内了,但是他还是在当前屏幕内: 3.标签与页面相对于屏幕的位置都可以得到. 有了以上三个条件我们就能够自己实现JS实现鼠标移入标签页的完整 title 提示的功能了. 二.实现功能 直接上代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-

转:zTree树控件key配置之title:zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称

当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该节点的全称,这里我们以title名称为例吧,示例代码如下所示: view sourceprint? 1.{ id:233, pId:23, name:"叶子节点233...",title:"叶子节点23333434343434"}, 2.{ id:234, pId:23

用js写一个鼠标坐标实例

HTML代码 写一个div来作为鼠标区域 div中写一个span显示坐标信息 <body> <div id=""> <span></span> </div> </body> 给div和span增加样式并定位 <style type="text/css"> div{ position: relative;/* 定位信息 */ background-color: #398439; /*