最近项目中有用到一个非常强大的组件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. poj 1011 搜索减枝

    题目链接:http://poj.org/problem?id=1011 #include<cstdio> #include<cstring> #include<algor ...

  2. lightoj 1021 - Painful Bases 状态压缩

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1021 #include<cstring> #include<cstd ...

  3. JuliaSet&MandelBulb @ Maya&KK —— 4亿粒子的测试

    分形是数学里最美的一个话题之一,美在 无限的细节 在尺寸上的自相似 这两个特征造成的牛逼效果就是随便选择分形上的一个小坑或者小山包拉进后又是一个广阔的世界,而把这个世界中的一个小坑或者小山包拉进又™是 ...

  4. js中return、return true、return false的区别

    一.返回控制与函数结果, 语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果  二.返回控制, 无函数结果,语法为:return;  在大多数情况下,为事件 ...

  5. Scrapy运行报错解决方案

    最近在学习Scrapy框架,用博客记录一下遇到的错误的解决方案 时间: 2016-9-20 错误:ImportError: No module named items 原因:spiders下的.py文 ...

  6. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(45)-工作流设计-设计步骤

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(45)-工作流设计-设计步骤 系列目录 步骤设计很重要,特别是规则的选择. 我这里分为几个规则 1.按自行 ...

  7. 微软ASP.NET网站部署指南(10):迁移至SQL Server

    1.  综述 第2章的部署SQL Server Compact和第9章的部署数据库更新里解释了为什么终于要升级到完整版SQL Server .本章节将告诉你怎样来做. SQL Server Expre ...

  8. hibernate批量删除和更新数据

    转载自:http://blog.csdn.net/yuhua3272004/article/details/2909538 Hibernate3.0 採用新的基于ANTLR的HQL/SQL查询翻译器, ...

  9. Apache让一台虚拟主机接受多域名解析(转)

    之前写了一篇文章关于linux下apache虚拟主机配置,配置那是相当简单: <VirtualHost *:80> ServerAdmin admin@example.com Docume ...

  10. 在GDB 中如何记录 instruction-history and function-call-history

    (EDIT: per the first answer below the current "trick" seems to be using an Atom processor. ...