//引入idangerous.swiper.min.js

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

        loop: true,

        pagination: '.pagination',

        autoplay: 2000,

        autoplayDisableOnInteraction:false,

        paginationClickable: true,

        mode: 'vertical',//竖向轮播

        mousewheelControl : true

    });

js

//引入idangerous.swiper.css

 *{margin:;padding:;}

        .swiper{position:relative;height:600px;}

        .swiper-wrapper,.swiper-slide,.swiper-slide img{width:100%;}

        .pagination {

            position: absolute;

            z-index:;

            left: 10px;

            top: 10px;

        }

        .swiper-pagination-switch {

            display: block;

            width: 8px;

            height: 8px;

            border-radius: 8px;

            background: #555;

            margin: 0 0px 5px;

            opacity: 0.8;

            border: 1px solid #fff;

            cursor: pointer;

        }

        .swiper-active-switch {

            background: #f8bb00;

        }

css

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="idangerous.swiper.css"/>

</head>

<body>

<div class="swiper">

    <div class="swiper-container jl_lb">

        <ul class="swiper-wrapper">

            <li class="swiper-slide">

                <a href="javascript:void (0);"><img src="in_banner.png"></a>

            </li>

            <li class="swiper-slide">

                <a href="javascript:void (0);"><img src="in_banner.png"></a>

            </li>

        </ul>

  </div>

    <div class="pagination"></div>

</div>

</body>

<script src="idangerous.swiper.min.js"></script>

</html>

swiper动画

1、需要同时引入animate.min.css 和 swiper.animate.min.js

2、给需要添加动画的元素添加class名ani， 并添加后边几个参数swiper-animate-effect="fadeInDownBig" swiper-animate-duration="1.5s" swiper-animate-delay="0s"

swiper-animate-effect表示动画效果，通过animate.css选择需要的参数

3、调用的时候跟普通的不太一样，具体可参照官网

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

                direction: 'vertical',//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。

                // loop: true,//无缝滚动，设置为true，切换到最后一张时会自动跳转到第一张

                freeMode : false,//slide滑动时只滑动一格，并自动贴合wrapper

                // 如果需要分页器

                pagination: '.swiper-pagination',

                mousewheelControl : true,//滚动鼠标时切换轮播图

                onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit

                    swiperAnimateCache(swiper); //隐藏动画元素

                    swiperAnimate(swiper); //初始化完成开始动画

                },

                onSlideChangeEnd: function(swiper){

                    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画

                }

            })

swiper轮播图--兼容IE8的更多相关文章

  1. Swiper轮播图

    今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码:   <!DOCTYPE html>   <html lang="en">   < ...

  2. 微信小程序_(组件)swiper轮播图

    微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一.swiper组件 indicator-dots:是否显示面板指示点[默认值false] autoplay:是否自动 ...

  3. 微信小程序之swiper轮播图中的图片自适应高度

    小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...

  4. swiper 轮播图，拖动之后继续轮播

    在此贴出swiper官网地址:https://www.swiper.com.cn/api/index.html 示例如下(官网示例): <script> var mySwiper = ne ...

  5. swiper轮播图（逆向自动切换类似于无限循环）

    swiper插件轮播图,默认的轮播循序是会从右向左,第一张,第二张,第三张,然后肉眼可见是的从第三张从左到右倒回第一张,这样就会有些视觉体验不高, ,不过还是能够用swiper本身的特性更改成无限循环 ...

  6. 如何自定义微信小程序swiper轮播图面板指示点的样式

    https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...

  7. 自定义微信小程序swiper轮播图面板指示点的样式

    微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...

  8. swiper轮播图插件

    一.简介 ①Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. ②Swiper 是一款免费以及 ...

  9. vue2 使用 swiper 轮播图效果

    第一步.先安装swiper插件 npm install swiper@3.4.1 --save-dev 第二步.组件内引入swiper插件 import Swiper from 'swiper' im ...

随机推荐

  1. Java发送邮件，所遇到的常见需求

    明天要做关于发送邮件的接口,虽然我之前已用Java Mail做过许多关于邮件的发送.但同事说有点难点,虽我还不知难点在哪,还是要复习下.凡事预则立,不预则废嘛~ 所需的包: Java Mail : 目 ...

  2. 获取某个数据所在数据列表中的行数 mysql

    select * from (select @rownum := @rownum+1 as rownum,goods_idfrom table_goods, (select @rownum:=0) t ...

  3. QCom MSM MDP显示驱动一些点的简记

    简要记录了Qualcom MSM8xxx MDP Framebuffer驱动中的一些点. Framebuffer设备的sysfs 330static int msm_fb_create_sysfs(s ...

  4. android——学习：网格布局——GridLayout

    Android一开始就提供了几种布局控件,如线性布局LinearLayout.相对布局RelativeLayout和表格布局TableLayout等,但在很多情况下,这些布局控件是不能满足要求的,因此 ...

  5. Google's Open Source SLAM Library ---- Cartographer

    What is Cartographer? Google announce the open source release of Cartographer, a real-time simultane ...

  6. .net 浏览器请求过程（图）

    大致: 细节: (信息来源于传智播客教学视频)

  7. [转载] 跳表SkipList

    原文: http://www.cnblogs.com/xuqiang/archive/2011/05/22/2053516.html leveldb中memtable的思想本质上是一个skiplist ...

  8. Android 项目中常用到的第三方组件

    项目中常用到的第三方组件 1 社会化分享ShareSDK-Core-2.5.9.jarShareSDK-QQ-2.5.9.jarShareSDK-QZone-2.5.9.jarShareSDK-Sin ...

  9. C++——使用类

    一.运算符重载 1.运算符重载 C++允许将运算符重载扩展到用户定义的类型. 要重载运算符,需使用被称为运算符函数的特殊函数形式.运算符函数的格式如下: operatorop(argument lis ...

  10. Bootstrap列表

    一.HTML的列表 在HTML文档中,列表结构主要有三种:有序列表.无序列表和定义列表.具体使用的标签说明如下: 1.无序列表 <ul> <li>…</li> &l ...