//引入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. linux定时任务crontab

    今天在执行mysql定时任务语句时候问了很多大拿,都建议我不要随便在生产环境下写定时任务这样的语句,有的说会有延时,那样的话就不准了,有的说在.系统时间和本地时间不一致怎么办?后来就建议我用linux ...

  2. U盘安装CentOS7的最终解决方案

    转载自http://www.augsky.com/599.html 终于将CentOS7装上笔记本了,过程无比艰辛,因为我发现网上大家提到的所有U盘安装CentOS7时碰到的问题几乎都被我碰到了,像什 ...

  3. JAVA程序的创建与编辑

    1.JAVA项目的创建与命令编辑 打开JAVA程序,选择工具栏上的创建按钮旁边的小三角,在下拉菜单中选择创建JAVA项目,在出现的对话窗口中输入项目名,在JRE使用执行环境中选择可用的资源包,如果安装 ...

  4. CocoaPods的安装[转载]

    ［转载] 原地址http://www.tuicool.com/articles/7VvuAr3 觉得很好,很有用 iOS 最新版 CocoaPods 的安装流程 1.移除现有Ruby默认源 $gem ...

  5. 【Unity3D游戏开发】Application.systemLanguage无法区分简体中文和繁体中文 (二六)

    游戏发布,语言本地化需要繁体中文和简体中文 iOS8版本之前没问题,iOS9上无法正常识别这两种语言 原因是在iOS9上,Unity通过Application.systemLanguage返回的简体中 ...

  6. linux下inotify的使用

    有时候我们需要检测某个目录下文件或者子目录的改动状况,如添加.删除.以及更新等,Linux系统上提供了inotify来完成这个功能.inotify是在版本2.6.13的内核中首次出现,现在的发行本应该 ...

  7. [SAP ABAP开发技术总结]采购、销售、生产简单业务流程

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. 优秀的Markdown编辑器MarkdownPad2免费版使用全功能

    MarkdownPad,一款不错的Markdown编辑器,本人一直在用,具备所有Markdown的基本语法外支持一些特别的扩展,比如表格等. MarkdownPad分为免费版和收费版,区别是免费版不支 ...

  9. git学习笔记07-冲突了怎么办-那就解决冲突呗

    比如一个人自己创建了分支feature1进行修改提交之后提交,另一个人在master上修改然后提交. master分支和feature1分支各自都分别有新的提交,变成了这样: 这种情况下,Git无法执 ...

  10. PHP 全局变量 $_SERVER

    $_SERVER['SERVER_ADDR']    当前运行脚本所在的服务器的 IP 地址. $_SERVER['REQUEST_TIME']    请求开始时的时间戳.从 PHP 5.1.0 起可 ...