zoukankan      html  css  js  c++  java
  • 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(); //鼠标移出之后,自动轮播开启
          })
        })
    大神绕道,不喜勿喷。
  • 相关阅读:
    POJ 2723 Get Luffy Out(2-SAT)
    ZOJ 3613 Wormhole Transport
    HDU 4085 Peach Blossom Spring
    NBUT 1221 Intermediary
    NBUT 1223 Friends number
    NBUT 1220 SPY
    NBUT 1218 You are my brother
    PAT 1131. Subway Map (30)
    ZSTU OJ 4273 玩具
    ZSTU OJ 4272 最佳淘汰算法
  • 原文地址:https://www.cnblogs.com/TMM-eng/p/9283611.html
Copyright © 2011-2022 走看看