//引入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. GCD之dispatch queue深入浅出

    GCD之dispatch queue深入浅出 http://blog.csdn.net/samuelltk/article/details/9452203

  2. 并行parallel和并发concurrent的区别

    http://stackoverflow.com/questions/1050222/concurrency-vs-parallelism-what-is-the-difference Concurr ...

  3. SQL 2008下载地址以及全新安装详细过程

    本博文将详细介绍如何安装SQL 2008以及在这个安装过程中每个选项的意思,如何选择使用什么和不使用什么等等琐碎的东东. 下面——开始了!!!SHOW TIME~~~先提供各种程序下载地址:SQL 2 ...

  4. Java自制人机小游戏——————————剪刀、石头、布

    package com.hello.test; import java.util.Scanner; public class TestGame { public static void main(St ...

  5. Web开发——Tomcat的配置

    1.选择Tomcat 1.Apache官网http://apache.org/ 2.Tomcat官网http://tomcat.apache.org/ 3.Tomcat下载地址http://tomca ...

  6. hdu 5927 Auxiliary Set 贪心

    Auxiliary Set Time Limit: 9000/4500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Pr ...

  7. poj 2985 The k-th Largest Group 树状数组求第K大

    The k-th Largest Group Time Limit: 2000MS   Memory Limit: 131072K Total Submissions: 8353   Accepted ...

  8. Moq的使用

    参考资料: 1. http://www.codeproject.com/Tips/729646/TDD-using-MOQ 2. https://github.com/Moq/moq4/wiki/Qu ...

  9. .net中类型转换的案例

    .net中三种数据类型转换区别((int),Int32.Parse() 和 Convert.toInt32() )(typename)valuename,是通用方法: Convert类提供了灵活的类型 ...

  10. [转]--android studio 使用gradle 导出jar包，并打包assets目录

    转自: http://www.cnblogs.com/wuya/p/android-studio-gradle-export-jar-assets.html   最近项目在做一个sdk,供别的开发者使 ...