使用swiper来实现轮播图

　　swiper实现轮播图几乎是没有一点点技术含量，但是用起来却很方便，包括对移动端的支持也很好。

　　由于简单这里当然就不会去详细介绍了，推荐两个网址：

　　1.http://www.swiper.com.cn/usage/index.html   它很简明地告诉了你应该如何去搭建这样的框架。

　　2.http://www.swiper.com.cn/api/   这里讲述了我们应该如何去设置更多的功能。

　　http://www.dowebok.com/77.html 这个网站介绍了使用fullPage.js插件实现全屏滚动。

　　

　　下面是一个简单的例子，可做参考。

<!DOCTYPE html>

<html>

<head>

    <title>swiper</title>

    <style>

        .swiper-container {

            width: 600px;

            height: 300px;

        }

        .swiper-slide{

            width: 600px;

            height: 300px;

        }

        .swiper-slide img{

            width: %;

            height: %;

        }

    </style>

    <link rel="stylesheet" href="swiper-3.4.1.min.css">

</head>

<body>

    <div class="swiper-container">

        <div class="swiper-wrapper">

            <div class="swiper-slide"><img src="http://pic55.nipic.com/file/20141208/19462408_171130083000_2.jpg"/>

            </div>

            <div class="swiper-slide"><img src="http://img1.imgtn.bdimg.com/it/u=2171560580,4021371399&fm=23&gp=0.jpg" alt=""></div>

            <div class="swiper-slide"><img src="http://img3.imgtn.bdimg.com/it/u=2714944387,2569159950&fm=23&gp=0.jpg" alt=""></div>

        </div>

        <!-- 如果需要分页器 -->

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

        <!-- 如果需要导航按钮 -->

        <div class="swiper-button-prev"></div>

        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->

        <div class="swiper-scrollbar"></div>

    </div>

    <script src="swiper-3.4.1.min.js"></script>

    <script type="text/javascript">

    window.onload = function() {

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

        // 轮播图的方向，也可以是vertical方向

        direction:'horizontal',

        //播放速度

        loop: true,

        // 自动播放时间

        autoplay:,

        // 播放的速度

        speed:,

        // 如果需要分页器，即下面的小圆点

        pagination: '.swiper-pagination',

        // 如果需要前进后退按钮

        nextButton: '.swiper-button-next',

        prevButton: '.swiper-button-prev',
　　　　　

　　　　　　// 这样，即使我们滑动之后， 定时器也不会被清除
　　　　  autoplayDisableOnInteraction : false,

        // 如果需要滚动条

        scrollbar: '.swiper-scrollbar',

      });

    }

    </script>

</body>

</html>

　　当然，其中不使用style来定义也可以实现轮播，是全屏的效果。

　　

使用swiper来实现轮播图的更多相关文章

  1. 小程序实践（二）：swiper组件实现轮播图效果

    swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...

  2. swiper插件制作轮播图swiper2.x和3.x区别

    swiper3.x仅仅兼容到ie10+.比較适合移动端. swiper3.x官网  http://www.swiper.com.cn/ swiper2.x能够兼容到ie7+.官网是http://swi ...

  3. 动态初始化swiper时，轮播图划不动得各种bug解决方法

    var mybanner = new Swiper('.i-gd-banner', { speed: 500, loop: true, observer:true,//修改swiper自己或子元素时, ...

  4. 移动端轮播图vue-awesome-swiper

    日常写设计文档,日常写Demo,写轮播图的时候觉得bootstrap不适合移动端,或者说不是轻量级的,于是换成Swiper,但是写的时候才发现怎么把这东西嵌到Vue里面啊? Σ( ° △ °|||)︴ ...

  5. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

  6. swiper轮播图--兼容IE8

    //引入idangerous.swiper.min.js var mySwiper = new Swiper ('.swiper-container', { loop: true, paginatio ...

  7. angularjs中使用轮播图指令swiper

    我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper  npm install --save swiper   或者 bower install --save swiper 引入文件 ...

  8. swiper结合ajax的轮播图

    Swiper 是什么:是纯JavaScript打造的滑动特效插件,能够实现触屏焦点图.触屏tab切换.触屏多图切换等常用效果. 开源.免费.稳定.应用广泛. 这就是swiper简单的介绍,由于是结合a ...

  9. swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播

    本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助.        首先,new Swiper的初始化最 ...

随机推荐

  1. 引用数据数据类型Scanner、Random

    键盘录入Scanner 获取键盘录入的数据,对获取数据的具体操作进行了封装,只需要调用方法,即可得到键盘录入的数据 A:导包            import java.util.Scanner;  ...

  2. 20169202 2016-2017-2《TCP/IP协议攻击》实验总结--十一周

    APR缓存中毒(ARP cache poisoning) 实验原理 ARP缓存是ARP协议的重要组成部分.ARP协议运行的目标就是建立MAC地址和IP地址的映射,然后把这一映射关系保存在ARP缓存中, ...

  3. C#调用windows命令行(CMD)

    using System.Diagnostics; public static void StartCmd(String command){Process p = new Process();p.St ...

  4. Netty 断线重连解决方案

    http://www.spring4all.com/article/889 本篇文章是Netty专题的第七篇,前面六篇文章如下: 高性能NIO框架Netty入门篇 高性能NIO框架Netty-对象传输 ...

  5. 构造复杂Lambda困惑之学会用LinqPad和Linqer实现Sql 和 Lambda之间的互转

    一:linq的话我们可能会遇到两个问题: 1. 我们的linq出现性能低下的时候,如果优化???? 我们写的linq所生成的sql是无法控制的... (要做性能优化,必须预先知道sql会生成啥样的?? ...

  6. Android-Intent意图传递数据

    Intent意图传递基本数据类型: OuterActivity 激活启动 OneActivity 用Intent携带基本数据类型: /** * Intent意图传递数据到另外一个Activity */ ...

  7. python版本selenium定位方式（不止八种哦）

    除了大家熟知的8种定位方式之外 1.id定位:find_element_by_id(self, id_)2.name定位:find_element_by_name(self, name)3.class ...

  8. Ubuntu16.04中把默认JAVA设置为Oracle的JDK！

    系统当中已经存在了OpenJDK,默认的JDK是它,并不是Oracle的JDK,执行下面操作就可以把Oracle的JDK设置为默认的了! 首先假设我们已经把Oracle的JDK安装和配置好了,但是就是 ...

  9. 洛谷P5264 【模板】多项式三角函数

    题面 传送门 题解 据说有一个叫做欧拉公式的东西 \[e^{ix}=\cos(x)+i\sin(x)\] 别问我为啥我今天第一次看到它 那么显然也有 \[e^{-ix}=\cos(x)-i\sin(x ...

  10. 木马APP的简单分析(Android Killer分析)

    本文作者:三星s7edge 一.此贴目的:分析一个木马APP样本的行为.—————————————————————————————————————————————————-二.分析步骤及结果: 文件名 ...