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>

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

  • 相关阅读:
    Python生成器
    字符串匹配——KMP算法
    字符串匹配——Brute-Force 简单匹配算法
    算法笔记--八个常见排序算法总结
    算法笔记--基数排序
    算法笔记--归并排序
    算法笔记--堆排序
    算法笔记--直接选择排序
    算法笔记--快速排序
    算法笔记--冒泡排序
  • 原文地址:https://www.cnblogs.com/lichunjing/p/7059942.html
Copyright © 2011-2022 走看看