使用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. Web环境中Spring的启动过程

    1.spring不但可以在JavaSE环境中应用,在Web环境中也可以广泛应用,Spring在web环境中应用时,需要在应用的web.xml文件中添加如下的配置: …… <context-par ...

  2. 设计模式11---组合模式（Composite Pattern）

    一.组合模式定义 将对象组合成树形结构以表示“部分-整体”的层次结构,使得用户对单个对象和组合对象的使用具有一致性.Compose objects into tree structures to re ...

  3. spark（oom内存溢出异常（out of memory））介绍1

    建立如图maven工程 maven的pom文件内容参考别的随笔 参考pom文件内容 同时记得添加scala oom内存溢出异常(out of memory)

  4. 再次理解js中的call函数

    a.call(b); 网上说明的版本比较多.有的说,是指针替换.有说,将a对象的方法加在b对象执行.官方说:什么对象替换什么对象.反正看了几个版本,尽管有具体的实例,看了我三次都没看懂它的具体含义.看 ...

  5. C,C++面试题2

    面试题1:变量的声明和定义有什么区别为变量分配地址和存储空间的称为定义,不分配地址的称为声明.一个变量可以在多个地方声明,但是只在一个地方定义.加入extern修饰的是变量的声明,说明此变量将在文件以 ...

  6. yum使用，使用rpm指令安装rpm，使用dpkg指令安装deb

    yum安装时如果报错提示安装失败,缺少库文件,可以使用: yum whatprovides 库名 之后安装提供的程序 yum remove xxx卸载 yum update 更新 解决 Require ...

  7. C#设置图片透明度

    逐个像素进行Alpha值的设置,网上其他的代码不能处理有透明背景的图片,因此要对Alpha.R.G.B均为0的透明色进行特殊处理,不做转换. private Bitmap SetImageOpacit ...

  8. 如何快速解决myeclipse中导入jquery文件的报错。

    如何快速解决myeclipse中导入jquery文件的报错. 解决: 选中错误的文件, 点击右键, 选中myeclipse,点击Exclude From Validation.

  9. linux安装报错之：ifconfig command not found解决

    问题描述: 用虚拟机VMware安装linux系统(镜像文件是从官网下载的CentOS-7.0-1406-x86_64-DVD.iso), 在安装完成之后,输入ifconfig命令报错:ifconfi ...

  10. 【CF453D】 Little Pony and Elements of Harmony（FWT）

    题面 传送门 设\(a\)的递推公式为 \[a_i=\sum_ja_jb[count(i\oplus j)]\] 其中\(\oplus\)为异或,\(count(i)\)表示\(i\)的二进制中\(1 ...