//引入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. Web的Ajax应用开发模式（一）——了解Ajax的使用形式

    寄语: 前天在查看一些公司的招聘要求时,看到有公司要求测试人员了解Ajax,故写此博文旨在帮助测试人员提高自身技术知识水平,愿与广大测试同胞共同进步.(欢迎纠错!!!) 图1: 图2:

  2. C# 多线程之一：信号量Semaphore

    通过使用一个计数器对共享资源进行访问控制,Semaphore构造器需要提供初始化的计数器(信号量)大小以及最大的计数器大小 访问共享资源时,程序首先申请一个向Semaphore申请一个许可证,Sema ...

  3. 我的android学习经历28

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

  4. 【leetcode❤python】110. Balanced Binary Tree

    #-*- coding: UTF-8 -*-#平衡二叉树# Definition for a binary tree node.# class TreeNode(object):#     def _ ...

  5. Block很简单，就像delegate的简化版

    代理设计模式对于iOS开发的人来说肯定很熟悉了,代理delegate就是委托另一个对象来帮忙完成一件事情,为什么要委托别人来做呢,这其实是MVC设计模式中的模块分工问题,例如View对象它只负责显示界 ...

  6. iOS深入学习（UITableView系列2：reloadData）

    接着前一篇的博客来深入学习UITableView, UITableView的数据源是NSMutableArray的对象_infoArray,现在数组的内容为{@"Zero",@&q ...

  7. 暴雪游戏-守望先锋-FPS

    http://us.battle.net/overwatch/en/    

  8. FZU 2215 Simple Polynomial Problem（简单多项式问题）

    Description 题目描述 You are given an polynomial of x consisting of only addition marks, multiplication ...

  9. LightOJ::1077 -----奇妙的最大公约数

    题目:http://www.lightoj.com/volume_showproblem.php?problem=1077 题意:在平面上, 给出两个点的坐标 例如:(x, y) 其中x, y 都是整 ...

  10. phpcms 在后台增加了一个模型的话，在数据库中就会相应的增加数据库表

    在phpcms后台管理系统中,我们如果增加一个新的模型的话,例如名为:测试模型,英文名:test 在添加完成后,我们在数据库中发现增加了两个数据表:v9_test,v9_test_data;