Swiper 、 iscroll 、Lazyload等插件

Swiper

首先要引入swiper.js和swiper.css

先上代码：

var mySwiper = new Swiper('.swiper-container',{

              direction: 'horizontal',            默认是horizontal 水平      vertical是垂直方向

              loop:true,    

               speed:300,           速度，可以自己调

              autoplay:500,       可选选项，自动滑动

             pagination:'.swiper-pagination',

              nextButton:'.swiper-button-next',

              prevButton:'.swiper-button-prev',

             scrollbar:'.swiper-scrollbar',

});

swiper很强大，是纯javascript打造的滑动特效插件，面向手机，平板电脑等移动终端。

swiper能实现触屏焦点图，触屏Tab切换，触屏多图切换等常用效果。

iscroll

之所以iscroll会诞生，主要是因为无论在iphone  ipad  android或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。

Lazyload

lazyload是一个用javascript编写的jQuery插件，他可以延迟加载长页面中的图片，在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到他们所在的位置，这与图片预处理的方式正好相反。

使用方法：

引入lazyload.js

改变图片的路径。图像的地址必须放在data-original属性上，给懒加载图像一个特定的class（例如：lazy）

eg:<img class="lazy" alt="" width="230" height="220" data-orignal="img/example.jpg" />

js:   将所有class为lazy的图片将被延迟加载

            $(function(){

                           $("img.lazy").lazyload();

             });

可以使用特效：例如淡入效果   effect:"fadeIn"

注意：这里必须设置图片的width和height，否则插件可能无法正常工作。