Swiper插件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>swiper简介_导入_以及使用.</title>
    <!-- swiper
    是帮助完成PC端,移动端,滑动效果的库.
    在使用过程当中, 
    
    可以选择依赖jquery的库, 也可以选择独立的js文件.
    两者大小有所差别, 独立文件大约10k.
    (3.0-)

    4.0+版本取消了对jquery依赖库的选择.


    === 在导入过程中.

    需要导入swiper的js文件和css式样文件. 放在自定式样之上.

    先导入css文件, 再导入js文件

     -->
    <link rel="stylesheet" type="text/css" href="web-rem/css/swiper.min.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/swiper.jquery.min.js"></script>
    <script type="text/javascript">
        // 使用swiper库的时候,可以对元素直接增加类.swiper-container.wrapper.slide.pagination.(button)prev,next


        $(function(){

            // var swiper = new Swiper('.swiper-container');
            // 变量接收优化性能.

            new Swiper('.swiper-container');
            // 新建Swiper对象,赋值于式样名..  (容器)
            // 赋值过后该式样下, 与既定规则相同的类名, 即可拥有式样.
            // 必须元素===> 容器(container)>封套,包装(wrapper)>滑动对象(slide)

        })

    </script>
    <style>


    .swiper-container {
        /*容器的长宽会随slide发生变化, 可不设.*/
    }
    .swiper-slide {
        font: 33px/333px "Microsoft Yahei";
        background: #ddd;

    }

    </style>

</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">slide1</div>
            <div class="swiper-slide">slide2</div>
            <div class="swiper-slide">slide3</div>
            <div class="swiper-slide">slide4</div>
            <div class="swiper-slide">slide5</div>
            <div class="swiper-slide">slide6</div>
        </div>
    </div>
    
</body>
</html>

 

posted @ 2019-08-13 21:04  Jrri  阅读(182)  评论(0)    收藏  举报