最近项目中有用到一个非常强大的组件idangerous.swiper.js的组件,这个组件能够实现幻灯片的播放效果,而且有各种3D效果,大家可以去试一下,效果很不错的说!

这是这个项目的api文档:http://www.idangero.us/sliders/swiper/api.php

GitHub上的地址:https://github.com/nolimits4web/Swiper

具体使用方法(copy的Swiper官网的代码):

首先在页面中引入css和js文件:

<link rel="stylesheet" href="path_to_css/idangerous.swiper.css">
<script defer src="path_to_js/idangerous.swiper-2.x.min.js"></script> 页面中需要的页面结构
<div class="swiper-container">
<div class="swiper-wrapper">
<!--First Slide-->
<div class="swiper-slide">
<!-- 这中间可以加入任意的页面代码 -->
</div> <!--Second Slide-->
<div class="swiper-slide">
<!-- 这中间可以加入任意的页面代码 -->
    </div>     <!--Third Slide-->
    <div class="swiper-slide">
<!-- 这中间可以加入任意的页面代码 -->
</div>
</div>
</div>
这是JS调用的示例: <script type="text/javascript">
/*======
Use document ready or window load events
For example:
With jQuery: $(function() { ...code here... })
Or window.onload = function() { ...code here ...}
Or document.addEventListener('DOMContentLoaded', function(){ ...code here... }, false)

=======*/ window.onload = function() {
var mySwiper = new Swiper('.swiper-container',{
//Your options here:
mode:'horizontal',
loop: true
//etc..
});
} /*
Or with jQuery/Zepto
*/

$(function(){
var mySwiper = $('.swiper-container').swiper({
//Your options here:
mode:'horizontal',
loop: true
//etc..
});
}) </script>
再者,这个组件的api的方法很多,可以设置的选项也有很多,我目前使用的比较少,然后对他的文档的阅读也不怎么深入,希望以后能够有时间仔细研究下这个组件的api。

												

Swiper的简单实用方法的更多相关文章

  1. bootstrapValidator.js,最好用的bootstrap表单验证插件 简单实用方法

    实用方法 1.引入 在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件 2. 按照bootstrap的表单组件 ...

  2. Java 简单实用方法二

    整理以前的笔记,在学习Java时候,经常会用到一些方法.虽然简单但是经常使用.因此做成笔记,方便以后查阅 这篇博文先说明构造和使用这些方法. 1,判断String类型数据是否包含中文 可以通过正则表达 ...

  3. 关于Android对话框简单实用方法总结

    要显示一个对话框,首先需要在xx.xml下添加一个Button按钮,并添加一个对应id. 单次点击事件对话框: button.setOnClickListener(new View.OnClickLi ...

  4. 浅谈vuex使用方法(vuex简单实用方法)

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vu ...

  5. vuex的module的简单实用方法

    当我们的项目越来越大的时候,我们就开始使用vuex来管理我们的项目的状态.但是如果vuex的状态多了呢,这个时候module就登场了.看了一下官方的文档,很详细,但是没有demo让初学者很头疼.那我就 ...

  6. NProgress.js加载进度插件的简单实用方法

    NProgress.js 说明: NProgress是基于jquery的,且版本要 >1.8 下载地址: https://github.com/rstacruz/nprogress API: N ...

  7. WPF简单实用方法(持续更新)

    1:点击退出提示框 MessageBoxResult result = MessageBox.Show("你真的要退出吗?", "", MessageBoxBu ...

  8. php压力测试工具简单实用方法

    命令 ab -h 指令帮助 ab -n100 -c10 http://www.baidu.com 发起100个请求 并发数为10 设置测试地址是百度,注意测试测试时候请求数和并发数尽量设置低一点 Re ...

  9. Android反编译工具介绍与简单实用方法

    Android反编译的目的无非就是为了看到APK的xml.资源和代码: 得到代码的方式:直接解压APK文件 --> 得到classes.dex文件 --> 使用 dex2jar class ...

随机推荐

  1. linux mono

    linux下.net环境; rpm -ivh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm &am ...

  2. EXCEL VBA运行不显示系统提示

    Sub XXX() Application.DisplayAlerts = False '代码段 Application.DisplayAlerts = True End Sub 以下是MICROSO ...

  3. python处理xml的常用包(lib.xml、ElementTree、lxml)

    python处理xml的三种常见机制 dom(随机访问机制) sax(Simple APIs for XML,事件驱动机制) etree python处理xml的三种包 标准库中的xml Fredri ...

  4. HIVE自定义函数 UDF

    自定义my_md5hash 具体hive源码怎么调用看我另外一篇博客 package udf.hive.myudf; import org.apache.commons.codec.digest.Di ...

  5. Tomcat工作原理(转)

    Tomcat简介 作者:杨晓(http://blog.sina.com.cn/u/1237288325) 一.Tomcat背景 自从JSP发布之后,推出了各式各样的JSP引擎.Apache Group ...

  6. MapObject shape数据操作

    利用MO 的GeoDataset  .DataConnection  Recordset 进行数据操作 在MO中.使用GeoDataset对象和DataConnection 对象来连接和读取地理数据. ...

  7. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(33)-数据验证共享

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(33)-数据验证共享 注:本节阅读需要有MVC 自定义验证的基础,否则比较吃力 一直以来表单的验证都是不可 ...

  8. python的私有变量解析

    在内的内部定义并使用,外部无法訪问,以双下划线作为前作,定义后被python转为 _classname__变量名了 ------------------------------------------ ...

  9. guice框架的入门使用

    guice框架是一种类似于spring的ioc容器的一种框架,使用简单,比較轻量级的一个框架,速度极快,灵活性极强,如今就先来写几个guice的程序. 在这里我就不给出guice的jar包,这些都能够 ...

  10. valgrind 打印程序调用树+进行多线程性能分析

    使用valgrind的callgrind工具进行多线程性能分析 yum install valgrind / wget http://valgrind.org/downloads/valgrind-3 ...