使用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. 编写高质量代码改善C#程序的157个建议——建议93：构造方法应初始化主要属性和字段

    建议93:构造方法应初始化主要属性和字段 类型的属性应该在构造方法调用完毕前完成初始化工作.如果字段没有在初始化器中设置初始值,那么它就应该在构造方法中初始化. 类型一旦被实例化,那么它就应该被视为具 ...

  2. Ubuntu下安装配置java及环境变量

    这里的办法不是在线安装,因为需要更新源(你懂的,费时费事~),so这里介绍在Ubuntu上手动下载安装配置Java环境变量 *系统:Ubuntu 16.4 1.下载jdk,直接用系统的Firefox浏 ...

  3. 解决svn：E155037错误（另附查看.db文件的工具）

    今天使用svn提交代码的时候出问题了,Error:svn: E155037.....Previous operation has not finished; run 'cleanup' if it w ...

  4. 所有中心对称五字母域名生成，扫了一下，com的基本上都被注册了。。。

    public static void main(String[] args) { String[] letter = new String[]{"i","m", ...

  5. CSS与jQuery补漏

    1.position属性 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. ...

  6. tomcat 6.x + log4j日志配置并按天（或大小）生成文件

      tomcat日志,默认路径在${catalina.home}/logs目录下,默认使用的是tomcat自己封装的logging工具类,默认配置文件使用的${catalina.home}/conf/ ...

  7. layui后台框架的搭建

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从 ...

  8. wpf Route Event Code Snippet

    将下面内容保存为snippet后缀文件,通过vs的代码片段管理工具导入即可,快捷键请按需修改: <?xml version="1.0" encoding="utf- ...

  9. [原创] 思维导图笔记（二）：SQL

    为了补一补知识体系上的缺漏,最近找了看完了Ben Forta写的<Sams Teach Yourself SQL in 10 Minutes>,翻译过来叫<SQL必知必会>.从 ...

  10. OCP 11g认证052考试最新题库（带答案）-带38题

    38.Which three are true about the Automatic Database Diagnostic Monitor (ADDM)? A) Its findings are ...