//引入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. Springmvc整合tiles框架简单入门示例（maven）

    Springmvc整合tiles框架简单入门示例(maven) 本教程基于Springmvc,spring mvc和maven怎么弄就不具体说了,这边就只简单说tiles框架的整合. 先贴上源码(免积 ...

  2. MyBatis的返回参数类型和查询结果遍历

    MyBatis的返回参数类型分两种 1. 对应的分类为: 1.1.resultMap: 1.2.resultType: 2 .对应返回值类型: 2.1.resultMap:结果集 2.2.result ...

  3. 这是一个关于Latex的测试

    这是行内公式的例子 \( c=\sqrt{a^2+b^2} \). 下面是行间公式的例子\[ c=\sqrt{a^2+b^2}. \] 注意: 行内公式不是用$分界, 而是 \( c=\sqrt{a^ ...

  4. 我的android学习经历28

    一道题目关于Layout_weight: 当前屏幕的大小为430,有左右两个控件,未分配权重之前都是300,左控件的权重是3,右控件的权重是2,请计算左右两个控件的宽度大小是多少? 解: 当前屏幕剩余 ...

  5. Linq实例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...

  6. js之字面量、对象字面量的访问、关键字in的用法

    一:字面量含义 字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量. 字面量分为字符串字面量(string literal ).数组字面量(array literal) ...

  7. TeeChart曲线平滑 Line.Smoothed

    需要注意的是,在加载点之前,需要设置Smoothed属性为false 等点加载完成之后,再设置Smoothed属性为true, //如果直接设置Smoothed为true再去加载点的话,曲线就完全不显 ...

  8. PCB表面处理工艺

    PCB表面处理最基本的目的是保证良好的可焊性或电性能.由于自然界的铜在空气中倾向于以氧化物的形式存在,不大可能长期保持为原铜,因此需要对铜进行其他处理. 1.热风整平(喷锡) 热风整平又名热风焊料整平 ...

  9. 将文件读取到内存、打印pe结构

    #include <stdio.h> #include <malloc.h> #include <stdlib.h> #include <string.h&g ...

  10. Metasploit基础命令

    msf > show exploits 列Metasploip的所有可用的渗透测试框架.在MSF终端中可以针对渗透测试中发现的安全漏洞来实施相应的渗透攻击. msf > show auxi ...