使用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. Javascript 的addEventListener()及attachEvent()对比

    Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...

  2. alpha七天冲刺计划-第一天

    alpha七天冲刺计划-第一天 一.团队会议: 内容:具体分配任务到个人,预估项目时间,确定UI样式. 合照: 二.团队成员任务认领: 李尤:界面UI设计. 彭迪彬:HTML+CSS部分实现. 任路乾 ...

  3. Window-document-javascript

    一个浏览器窗口有一个window对象,javascript属于window对象,html为document对象,属于window,body为document对象,只有设置body对象高度为100%,其 ...

  4. Window 服务启动出错 14001

    在安装windows服务时,没有异常情况,但是在启动的过程中出现 14001错误. 错误 14001 应用程序无法启动 因为应用程序的并行配置不正确 有关详细信息 请参阅应用程序事件日志 或使用命令行 ...

  5. [C#]合并单元格(行、列)

    详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak説明:控件ID指的是页面上面的Grid ...

  6. 推荐一些优秀的SAP网站

    著名的SAP论坛:(人气比较旺,可以找到很多问题的回答) http://www.sapfans.com/ 著名的It专业网站的SAP部分:(查找部分资料) http://sap.ittoolbox.c ...

  7. django 配置xadmin

    django xadmin本地安装 百度云 下载,激活码:bxhv,下载后不需要解压,直接本地 pip install xxx.zip django 版本需要 1.1.11, 1,添加app INST ...

  8. php中的list()用法中要注意的地方

    php中list()函数是用数组对一列值进行赋值, 该函数只用于数字索引的数组,且假定数字索引从0开始.(这句话很重要,是从索引0开始为变量赋值,如果对应的数字索引不存在,则对应位的变量也为空值.) ...

  9. java操作AWS S3一些坑记录

    1,aws sdk jar版本不一致问题 一开始我在pom.xml中只配置了如下aws-java-sdk-s3 <!-- https://mvnrepository.com/artifact/c ...

  10. [转] HTTP状态码错误代码

    一些常见的状态码为: 200 - 服务器成功返回网页 404 - 请求的网页不存在 503 - 服务不可用 详细分解: 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明 ...