zoukankan      html  css  js  c++  java
  • swiper插件的简单使用,实现图片轮播

    移动端和p c端经常会遇到写轮播图的情况,这里只是简单的说一下swiper插件的简单用法(移动端为例)。

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

        <title>Title</title>

        <link rel="stylesheet" href="css/swiper-3.4.2.min.css">

        <script>

            document.querySelector("html").style.fontSize = document.documentElement.clientWidth/375*50+"px";

        </script>

    </head>

    <body>

      <div class="detail_pic">

                <div class="swiper-container">

                    <div class="swiper-wrapper">

                        <div class="swiper-slide"><img src="img/1.jpg" alt=""></div>

                        <div class="swiper-slide"><img src="img/2.png" alt=""></div>

                        <div class="swiper-slide"><img src="img/3.png" alt=""></div>

                        <div class="swiper-slide"><img src="img/4.png" alt=""></div>

                        <div class="swiper-slide"><img src="img/5.png" alt=""></div>

                        <div class="swiper-slide"><img src="img/6.png" alt=""></div>

                        <div class="swiper-slide"><img src="img/7.png" alt=""></div>

                    </div>

                </div>

            </div>

    <script src="js/zepto.js"></script>

    <script src="js/swiper-3.4.2.jquery.min.js"></script>

    <script>

    //轮播图

    $(document).ready(function () {

        var mySwiper = new Swiper ('.swiper-container', {

            direction: 'horizontal',  //轮播方向

            autoplay:2000,  //自动轮播

            loop: true,   //循环

            autoplayDisableOnInteraction : false  //用户操作后不停止

        });

    });

    </script>

    </body>

    </html>

    这样一个简单的轮播就实现啦,记得将图片地址换掉哦,原生的轮播,有时间可以写起来。。

  • 相关阅读:
    创作型---简单工厂模式
    创作型---建造者模式
    创作型---原型模式(C# ICloneable接口的实现)
    创作型---单例模式
    实时数据库简介和比较---PI
    记一次项目启动卡死不动,控制台无错误信息
    记一次jdk1.7升级jdk1.8项目报错
    javamail插件发送不同类型邮件方式
    javaweb购物车实现的几种方式
    android客户端app和服务端交互token的作用
  • 原文地址:https://www.cnblogs.com/lichunjing/p/7059942.html
Copyright © 2011-2022 走看看