swiper H5 滑屏插件推荐

最新推荐文章于 2024-02-06 16:54:58 发布

绿足

最新推荐文章于 2024-02-06 16:54:58 发布

阅读量3.4k

点赞数

分类专栏： Javascript 文章标签： swiper jquery javascirpt 手机滑屏

本文链接：https://blog.csdn.net/chenzhizhuo/article/details/50813611

版权

Javascript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

swiper H5 滑屏插件推荐

发现一款比较好用的移动端滑屏工具，这里推荐大家使用。

该工具支持手机&ＰＣ端屏幕滑动及图片切换，同时该插件还提供很多滑动及切换特效。并且有详细的ＡＰＩ及丰富实例。

　　这款工具是： Siwper , 参考网址：http://www.swiper.com.cn

这里不再对该插件工具做过多介绍，可以直接访问上方网站产看相关实例及ＡＰＩ。

这里附上个人编写的基于该JS插件的小实例。需要可直接下载参考。

页面代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width，initial-scale=1.0">
  <title>垂直滑动展示H5</title>
  <script src="js/jquery-1.10.1.min.js"></script>
  <script src="js/swiper.min.js"></script>
  <link rel="stylesheet" href="css/swiper.min.css">
  <script>
    $（
    function（） {

      var pros = $（ ".product-box"），
      mySwiper = new Swiper（ '.swiper-container'， {
        direction: "vertical"，
        onSlideChangeEnd: function（ swiper） {
          swiper.slides.find（ ".product-box"）.removeClass（ "anim"）;
          if（ swiper.slides.length > mySwiper.activeIndex） {
            pros.eq（ mySwiper.activeIndex）.addClass（ "anim"）;
          }
        }
      }）;
    }）
  </script>

  <style>
    html，body {
      position: relative;

      height: 100%;

    }

    body {

      background: #eee;

      font-family: Helvetica Neue， Helvetica， Arial， sans-serif;

      font-size: 14px;

      color: #000;

      margin: 0;

      padding: 0;

    }

    .swiper-container {

      width: 100%;

      height: 100%;

      margin: 0px auto;

    }

    .swiper-slide {

      position: relative;

      text-align: center;

      font-size: 18px;

      background: #fff;



      /* Center slide text vertically */

      display: -webkit-box;

      display: -ms-flexbox;

      display: -webkit-flex;

      display: flex;

      -webkit-box-pack: center;

      -ms-flex-pack: center;

      -webkit-justify-content: center;

      justify-content: center;

      -webkit-box-align: center;

      -ms-flex-align: center;

      -webkit-align-items: center;

      align-items: center;

    }

    .swiper-slide img {
      border: none;
      height: 100%;
      width: 100%;
    }

    .swiper-slide img.img-bg {
      position: relative;
      left: 0;
      top: 0;
      z-index: 1;
    }

    .swiper-slide .product-box {
      transform-origin: center;
      -webkit-transform: scale（0）;
      -moz-transform: scale（0）;

      -o-transform: scale（0）;
      -ms-transform: scale（0）;
      transform: scale（0）;

      -webkit-transition: all 1s ease-in-out;
      -ms-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;

      transition: all 1s ease-in-out;
      position: absolute;
      left: 50%;
      top: 50%;
      height: 40px;
      line-height: 40px;

      width: 280px;
      margin-left: -140px;
      height: -20px;
      z-index: 2;

      border: 1px solid #FF8604;
      border-radius: 8px;
    }

    .swiper-slide .product-box h3 {
      display: block;
      width: 100%;
      font-size: 18px;
      margin: 0;
      padding: 0;
    }

    .swiper-wrapper .swiper-slide:nth-child（even） {
      background: #FF8604;
    }



    .swiper-slide .anim {
      -ms-transform: scale（1）;
      -o-transform: scale（1）;
      -moz-transform: scale（1）;
      -webkit-transform: scale（1）;
      transform: scale（1）;
    }
  </style>

</head>

<body>
    <div class="swiper-container">
      <div class="swiper-wrapper">
            <div class="swiper-slide">
            <img class="img-bg" src="images/zhiling1.jpg">
           <div class="product-box">
            <h3>苹果7 ￥6666 预购速重</h3>
           </div>
            </div>
            <div class="swiper-slide"><img class="img-bg" src="images/zhiling2.jpg">
           <div class="product-box">
            <h3>苹果7 ￥6666 预购速重</h3>
           </div> 
            </div>
            <div class="swiper-slide"><img class="img-bg" src="images/zhiling3.jpg">
            <div class="product-box">
            <h3>苹果7 ￥6666 预购速重</h3>
           </div> 
          </div>
            <div class="swiper-slide"><img class="img-bg" src="images/zhiling4.jpg">
            <div class="product-box">
            <h3>苹果7 ￥6666 预购速重</h3>
           </div> 
          </div>
            <div class="swiper-slide"><img class="img-bg" src="images/zhiling5.jpg"></div>
            <div class="swiper-slide"><img class="img-bg" src="images/zhiling6.jpg"></div>
            <div class="swiper-slide"><img class="img-bg" src="images/zhiling7.jpg"></div>
            <div class="swiper-slide"><img class="img-bg" src="images/zhiling5.jpg"></div>
            <div class="swiper-slide"><img class="img-bg" src="images/zhiling4.jpg"></div>
            <div class="swiper-slide"><img class="img-bg" src="images/zhiling2.jpg"></div>
   </div>
 </div>
</body>
</html>

相关js 及css　可到：http://www.swiper.com.cn　下载

绿足

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
swiper H5 滑屏插件推荐

swiper H5 滑屏插件推荐发现一款比较好用的移动端滑屏工具，这里推荐大家使用。该工具支持手机&ＰＣ端屏幕滑动及图片切换，同时该插件还提供很多滑动及切换特效。并且有详细的ＡＰＩ及丰富实例。　　这款工具是： Siwper, 参考网址：http://www.swiper.c...
复制链接

扫一扫