swiper.js

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6.     <link rel="stylesheet" href="swiper.min.css">
  7.     <style type="text/css">
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         #topNav {
  13.             width: 100%;
  14.             overflow: hidden;
  15.             font: 16px/32px hiragino sans gb, microsoft yahei, simsun;
  16.             border-bottom:1px solid #f8f8f8;
  17.         }
  18.         #topNav .swiper-slide {
  19.             padding: 0 5px;
  20.             letter-spacing:2px;
  21.             width:3rem;
  22.             text-align:center;
  23.         }
  24.         #topNav .swiper-slide span{
  26.             transition:all .3s ease;
  27.             display:block;
  28.         }
  29.         #topNav .active span{
  30.             transform:scale(1.1);
  31.             color:#FF2D2D;
  32.         }
  33.         img{
  34.             width:100%;
  35.             line-height:0;
  36.         }
  37.     </style>
  38.  
  39.     </head>
  40.     <body>
  41.         <div id="topNav" class="swiper-container">
  42.             <div class="swiper-wrapper">
  43.                 <div class="swiper-slide active"><span>推荐</span></div>
  44.                 <div class="swiper-slide"><span>热点</span></div>
  45.                 <div class="swiper-slide"><span>深圳</span></div>
  46.                 <div class="swiper-slide"><span>视频</span></div>
  47.                 <div class="swiper-slide"><span>社会</span></div>
  48.                 <div class="swiper-slide"><span>娱乐</span></div>
  49.                 <div class="swiper-slide"><span>科技</span></div>
  50.                 <div class="swiper-slide"><span>问答</span></div>
  51.                 <div class="swiper-slide"><span>汽车</span></div>
  52.                 <div class="swiper-slide"><span>财经</span></div>
  53.                 <div class="swiper-slide"><span>军事</span></div>
  54.                 <div class="swiper-slide"><span>体育</span></div>
  55.                 <div class="swiper-slide"><span>段子</span></div>
  56.                 <div class="swiper-slide"><span>美女</span></div>
  57.                 <div class="swiper-slide"><span>国际</span></div>
  58.                 <div class="swiper-slide"><span>趣图</span></div>
  59.                 <div class="swiper-slide"><span>健康</span></div>
  60.                 <div class="swiper-slide"><span>特产</span></div>
  61.                 <div class="swiper-slide"><span>房产</span></div>
  62.             </div>
  63.         </div>
  64.  
  65.     </body>
  66. </html>
  67. <script src="jquery-3.2.1.min.js"></script>
  68. <script src="swiper-3.4.0.min.js" ></script>
  69.  
  70. <script type="text/javascript"> 
  71. var mySwiper = new Swiper(\'#topNav\', { 
  72.     freeMode: true, 
  73.     freeModeMomentumRatio: 0.5, 
  74.     slidesPerView: \'auto\', 
  75. }); 
  76.  
  77. swiperWidth = mySwiper.container[0].clientWidth 
  78. maxTranslate = mySwiper.maxTranslate(); 
  79. maxWidth = -maxTranslate + swiperWidth / 2 
  80.  
  81. $(".swiper-container").on(\'touchstart\', function(e) { 
  82.     e.preventDefault() 
  83. }) 
  84.  
  85. mySwiper.on(\'tap\', function(swiper, e) { 
  86.     slide = swiper.slides[swiper.clickedIndex] 
  87.     slideLeft = slide.offsetLeft 
  88.     slideWidth = slide.clientWidth 
  89.     slideCenter = slideLeft + slideWidth / 2 
  90.     // 被点击slide的中心点 
  91.     mySwiper.setWrapperTransition(300) 
  92.     if (slideCenter < swiperWidth / 2) { 
  93.         mySwiper.setWrapperTranslate(0) 
  94.     } else if (slideCenter > maxWidth) { 
  95.         mySwiper.setWrapperTranslate(maxTranslate) 
  96.     } else { 
  97.         nowTlanslate = slideCenter - swiperWidth / 2 
  98.         mySwiper.setWrapperTranslate(-nowTlanslate) 
  99.     } 
  100.  
  101.     $("#topNav  .active").removeClass(\'active\') 
  102.     $("#topNav .swiper-slide").eq(swiper.clickedIndex).addClass(\'active\') 
  103.  
  104. }) 
  105. </script>

 

版权声明：本文为weiwei0111原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/weiwei0111/p/10792197.html