JavaScript中非常强大的Swiper
刚开始学习javaScript的时候,做轮播图(比如手机淘宝首页的广告位置)是使用html和css结合js的for语句、传参等知识写出来的。但学到js事件时,其实用Swiper更加好写,Swiper的功能更加强大!个人感觉自学也不会太难,可以参考一下本人的看法,刚开始学习swiper就非常喜欢它,若有错误的地方请指出,谢谢!
一、什么是Swiper?
Swiper常用于移动端网站的内容触摸滑动,是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果,开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!(此介绍复制swiper中文网的解释)
二、Swiper使用方法
打开Swiper的中文网,网址:http://www.swiper.com.cn/
1、首先,要加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。若你的页面加载了jQuery.js或者zepto.js,你可以选择使用更轻便的swiper.jquery.min.js。下载网址:http://www.swiper.com.cn/download/index.html
2、布局,写HTML这一部分的内容。
3、在<title>标签下面引入刚才下载的文件,并写它的样式,通过<style>...</style>
4、然后就通过<script>...</script>在里面实现你想要的效果吧。个人觉得Swiper的个别函数都是比较长的,如:autoplayDisableOnInteraction,那写的时候可以直接在网页复制过来。
三、感受Swiper的强大功能
打开这个网址:http://www.swiper.com.cn/api/index.html,在最左边,有Swiper3.x的全部配置选项、方法、函数,在右边有参数、效果演示、使用方法示例。可以在这个网页上玩玩,看看具体实现的效果,同时,可以看它的写法,结合多个功能一起写,把一个轮播图写出来,你会爱上它非常强大的功能!
JavaScript中非常强大的Swiper的更多相关文章
- JavaScript中以构造函数的方式调用函数
转自:http://www.cnblogs.com/Saints/p/6012188.html 构造器函数(Constructor functions)的定义和任何其它函数一样,我们可以使用函数声明. ...
- 认识javascript中的作用域和上下文
javascript中的作用域(scope)和上下文(context)是这门语言的独到之处,这部分归功于他们带来的灵活性.每个函数有不同的变量上下文和作用域.这些概念是javascript中一些强大的 ...
- 简单分析JavaScript中的面向对象
初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...
- 关于javascript中的this关键字
this是非常强大的一个关键字,但是如果你不了解它,可能很难正确的使用它. 下面我解释一下如果在事件处理中使用this. 首先我们讨论一下下面这个函数中的this关联到什么. function doS ...
- 前端开发:Javascript中的数组,常用方法解析
前端开发:Javascript中的数组,常用方法解析 前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array ...
- JavaScript中‘this’关键词的优雅解释
本文转载自:众成翻译 译者:MinweiShen 链接:http://www.zcfy.cc/article/901 原文:https://rainsoft.io/gentle-explanation ...
- 一、javascript中的类
1.找出对象的构造器----constructor/instanceof constructor是用模版实例化对象的时候附带的一个额外属性,这个属性指向创建该对象时所使用的javascript构造函数 ...
- JavaScript中的百变大咖~this
原文链接:http://www.jeffjade.com/2015/08/03/2015-08-03-javascript-this/ JavaScript作为一种脚本语言身份的存在,因此被很多人认为 ...
- javascript中函数的3个高级技巧
× 目录 [1]作用域安全 [2]惰性载入 [3]函数绑定 前面的话 函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此.前面曾以深入理解函数系列的形式介绍了函数的相关内容,本 ...
随机推荐
- eclipse中创建类和方法自动注释
<?xml version="1.0" encoding="UTF-8"?><templates><template autoin ...
- Jquery Validate 动态添加校验
<cx:script> <script type="text/javascript"> //修改表单验证,提交 $(document).ready(func ...
- 论MySQL数据库中两种数据引擎的差别
InnoDB和MyISAM是在使用MySQL最常用的两个表类型,各有优缺点,视具体应用而定. 基本的差别为: MyISAM类型不支持事务处理等高级处理,而InnoDB类型支持. MyISAM类型的表强 ...
- Ajax Not Found,asp.net mvc 中
x前台代码: <script type="text/javascript"> $(document).ready(function () { $("#btnS ...
- Struts1、WebWork、Struts2介绍
一.Struts1 1.Struts1原理简介 Struts1框架以ActionServlet作为控制器核心,整个应用由客户端请求驱动.当客户端向Web应用发送请求时,请求被Struts1的核心控制器 ...
- HDU-2031-进制转换
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2031 进制转换 Time Limit: 2000/1000 MS (Java/Others) M ...
- 负载均衡软件LVS分析四(测试)
一.启动LVS集群服务LVS负载均衡管理和使用有两种方式,一种是以ipvsadm命令行脚步与ldirectord监控方式,一种是以Piranha工具进行管理和使用.下面分别介绍. 1.利用ipvsad ...
- 使用Grafana 展示Docker容器的监控图表并设置邮件报警规则
一.Docker 容器监控报警方式 接着上篇文章的记录,看到grafana的版本已经更新到4.2了,并且在4.0以后的版本中,加入了Alert Notifications 功能,这样在对容器 监控完, ...
- 如何用CSS快速布局(一)—— 布局元素详细
要快速进行网页排版布局,则必须对布局的元素有清晰的了解,才不会总是在细节处出错.这一篇先详解有关布局的因素作为布局基础:块级元素and内联元素.盒模型.准确定位.元素对齐.样式继承.下一篇则重点描述快 ...
- 《HelloGitHub月刊》第10期
前言 这一年感谢大家的支持,小弟这里给大家拜年了! <HelloGitHub月刊>会一直做下去,欢迎大家加入进来提供更多的好的项目. 最后,祝愿大家:鸡年大吉- <HelloGitH ...