使用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. Python Selenium 之常用API

    Selenium WebDriver下提供许多用来与浏览器.元素.鼠标.键盘.弹框.下拉菜单和列表的交互和设置方法.这些是计算机模拟人工进行自动化测试所必要依赖的方法.下面将用列表的方式总结出常用的A ...

  2. 洛谷P2147[SDOI2008]洞穴勘测(lct)

    题目描述 辉辉热衷于洞穴勘测. 某天,他按照地图来到了一片被标记为JSZX的洞穴群地区.经过初步勘测,辉辉发现这片区域由n个洞穴(分别编号为1到n)以及若干通道组成,并且每条通道连接了恰好两个洞穴.假 ...

  3. C++ 调用C++写的函数库的2种方法之一（显式调用）

    一:创建C++ DLL类库,名称:Dll1 1.Dll.h _declspec(dllimport) int add(int a, int b); 2.Dll.cpp // Dll.cpp : 定义 ...

  4. Maven整理笔记のMaven使用

    POM 就像Make的Makefile,Ant的build.xml一样,Maven项目的核心是pom.xml.POM(Project Object Model项目对象模型),定义了项目的基本信息,用于 ...

  5. copymemory()数组赋值

    在各网站的文章里面,见复制数据的方法中,有move的,有system.copy的,而要实际应用中,这两种方法,并不是很完美,会遇到一些问题,比如copy在记录里面的复制时,编译都过不去,而CopyMe ...

  6. JAVA IO总结及socket简单实现

    为了方便理解与阐述,先引入两张图: a.Java IO中常用的类 在整个Java.io包中最重要的就是5个类和一个接口.5个类指的是File.OutputStream.InputStream.Writ ...

  7. Verilog MIPS32 CPU（三）-- ALU

    Verilog MIPS32 CPU(一)-- PC寄存器 Verilog MIPS32 CPU(二)-- Regfiles Verilog MIPS32 CPU(三)-- ALU Verilog M ...

  8. Backup--备份相关的信息查看及小技巧

    --查看指定数据库当前最小 LSN DECLARE @database_name NVARCHAR( 200) SET @database_name ='DBName' SELECT  MIN (re ...

  9. C# Pinvoke判断是UEFI模式还是BIOS模式

    [DllImport("kernel32.dll", SetLastError = true)] public static extern UInt32 GetFirmwareEn ...

  10. 微软 eshop 数据存储之sqlserver

    微软的eshop项目写的很牛,学起来也比较吃力,最近公司刚好有一本书,说的就是.NET微服务,记下来. 因为微软对性能的要求,docker里面要有内存要求 安装dokcer,拉镜象 : docker ...