• 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(); //鼠标移出之后,自动轮播开启
          })
        })
    大神绕道,不喜勿喷。
  • 相关阅读:
    containerd 与安全沙箱的 Kubernetes 初体验
    dubbo-go 中的 TPS Limit 设计与实现
    MVC
    DataGridView移动上下行
    Jquery hover 事件
    MVC
    MVC 基本概念
    AJAX简单封装
    ViewState
    PostBack
  • 原文地址:https://www.cnblogs.com/TMM-eng/p/9283611.html
Copyright © 2020-2023  润新知