刚开始学习javaScript的时候,做轮播图(比如手机淘宝首页的广告位置)是使用html和css结合js的for语句、传参等知识写出来的。但学到js事件时,其实用Swiper更加好写,Swiper的功能更加强大!个人感觉自学也不会太难,可以参考一下本人的看法,刚开始学习swiper就非常喜欢它,若有错误的地方请指出,谢谢!

一、什么是Swiper?

  Swiper常用于移动端网站的内容触摸滑动,是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果,开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!(此介绍复制swiper中文网的解释)

二、Swiper使用方法

  打开Swiper的中文网,网址:http://www.swiper.com.cn/

  1、首先,要加载插件,需要用到的文件有swiper.min.jsswiper.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的更多相关文章

  1. JavaScript中以构造函数的方式调用函数

    转自:http://www.cnblogs.com/Saints/p/6012188.html 构造器函数(Constructor functions)的定义和任何其它函数一样,我们可以使用函数声明. ...

  2. 认识javascript中的作用域和上下文

    javascript中的作用域(scope)和上下文(context)是这门语言的独到之处,这部分归功于他们带来的灵活性.每个函数有不同的变量上下文和作用域.这些概念是javascript中一些强大的 ...

  3. 简单分析JavaScript中的面向对象

    初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...

  4. 关于javascript中的this关键字

    this是非常强大的一个关键字,但是如果你不了解它,可能很难正确的使用它. 下面我解释一下如果在事件处理中使用this. 首先我们讨论一下下面这个函数中的this关联到什么. function doS ...

  5. 前端开发:Javascript中的数组,常用方法解析

    前端开发:Javascript中的数组,常用方法解析 前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array ...

  6. JavaScript中‘this’关键词的优雅解释

    本文转载自:众成翻译 译者:MinweiShen 链接:http://www.zcfy.cc/article/901 原文:https://rainsoft.io/gentle-explanation ...

  7. 一、javascript中的类

    1.找出对象的构造器----constructor/instanceof constructor是用模版实例化对象的时候附带的一个额外属性,这个属性指向创建该对象时所使用的javascript构造函数 ...

  8. JavaScript中的百变大咖~this

    原文链接:http://www.jeffjade.com/2015/08/03/2015-08-03-javascript-this/ JavaScript作为一种脚本语言身份的存在,因此被很多人认为 ...

  9. javascript中函数的3个高级技巧

    × 目录 [1]作用域安全 [2]惰性载入 [3]函数绑定 前面的话 函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此.前面曾以深入理解函数系列的形式介绍了函数的相关内容,本 ...

随机推荐

  1. 正确的 Composer 扩展包安装方法

    问题说明 我们经常要往现有的项目中添加扩展包,有时候因为文档的错误引导,如下图来自 这个文档 的: composer update 这个命令在我们现在的逻辑中,可能会对项目造成巨大伤害. 因为 com ...

  2. 10种处理PHP字符串的措施

    PHP有一个海量字符串操作库,提供了大约100个分割.连接.解析和搜索文本的功能.在这一点上,PHP的性能是如此地强大以至于在处理字符串相关问题时,判断哪一个是最好的方法会比较困难.本文中我讲了10个 ...

  3. MySQL要导出成excel的方法

    MySQL 要导出成 excel 文件很简单,执行类似这样的命令:   select * from 某个表 into outfile  'd:/文件名.xls';   上述命令你在服务器上执行,就导在 ...

  4. ASP.NET MVC TempData使用心得

    说明: 在ASP.NET MVC中資料傳遞主要有ViewData與TempData ViewData主要是Controller傳遞Data給View,存留期只有一個Action,要跨Action要使用 ...

  5. 使用原始XML资源——定义原始XML资源

    原始XML资源一般保存在/res/xml路径下——当使用ADT创建Android应用时,/res/目录下并没有包含该目录,开发者应该自行手动创建xml目录. 接下来Android应用对原始XML资源没 ...

  6. origin从图中获得数据

    有Origin的原图,即利用Origin的"copy page"功能直接拷贝到文字处理软件的数据图,对于这种图,双击用Origin打开后,双击要导出数据的权限,打开"pl ...

  7. NodeMCU之旅(二):断线自动重连,闪烁连接状态

    事件监听器 NodeMCU采用了事件响应的方式.也就是说,只需为事件设置一个回调函数,当事件发生时,回调函数就会被调用. 注册事件监听器 wif.sta.eventMonReg() 开始监听 wifi ...

  8. package.json 里 devDependencies和dependencies的区别

    我们在使用npm install 安装模块或插件的时候,有两种命令把他们写入到 package.json 文件里面去,比如: --save-dev --save 在 package.json 文件里面 ...

  9. Scrum

    Scrum[编辑] 维基百科,自由的百科全书   Scrum是一种敏捷软件开发的方法学,用于迭代式增量软件开发过程.Scrum在英语是橄榄球运动中争球的意思. 虽然Scrum是为管理软件开发项目而开发 ...

  10. 用c3m自动生成的化学机理文件导入mfix里需要注意的一些问题

    1. 首先是类似这种写法: Species_g(1) = "CH4" Species_Alias_g(1) = "CH4" 可能会报错,写在一行可能就好了,如: ...