刚开始学习javaScript的时候,作轮播图(好比手机淘宝首页的广告位置)是使用html和css结合js的for语句、传参等知识写出来的。但学到js事件时,其实用Swiper更加好写,Swiper的功能更增强大!我的感受自学也不会太难,能够参考一下本人的见解,刚开始学习swiper就很是喜欢它,如有错误的地方请指出,谢谢!javascript
1、什么是Swiper?css
Swiper经常使用于移动端网站的内容触摸滑动,是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,能实现触屏焦点图、触屏Tab切换、触屏多图切换等经常使用效果,开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!(此介绍复制swiper中文网的解释)html
2、Swiper使用方法java
打开Swiper的中文网,网址:http://www.swiper.com.cn/jquery
一、首先,要加载插件,须要用到的文件有swiper.min.js和swiper.min.css文件。若你的页面加载了jQuery.js或者zepto.js,你能够选择使用更轻便的swiper.jquery.min.js。下载网址:http://www.swiper.com.cn/download/index.htmlapi
二、布局,写HTML这一部分的内容。架构
三、在<title>标签下面引入刚才下载的文件,并写它的样式,经过<style>...</style>函数
四、而后就经过<script>...</script>在里面实现你想要的效果吧。我的以为Swiper的个别函数都是比较长的,如:autoplayDisableOnInteraction,那写的时候能够直接在网页复制过来。布局
3、感觉Swiper的强大功能学习
打开这个网址:http://www.swiper.com.cn/api/index.html,在最左边,有Swiper3.x的所有配置选项、方法、函数,在右边有参数、效果演示、使用方法示例。能够在这个网页上玩玩,看看具体实现的效果,同时,能够看它的写法,结合多个功能一块儿写,把一个轮播图写出来,你会爱上它很是强大的功能!