通用插件整理

1.轮播插件Jquery-flexslider(插件依赖Jquery,引入文件路径以家家乐购商城为例)

官网：https://woocommerce.com/flexslider CDN:https://www.bootcdn.cn/flexslider/
1.引入flexslider.css
<link rel="stylesheet" type="text/css" href="plun-in/jquery-flexslider/flexslider.css"/>
2.引入js
<script src="plun-in/jquery-flexslider/jquery.flexslider-min.js" type="text/javascript" charset="utf-8"></script>
3.HTML结构

<div class="flexslider">
            <ul class="slides">
                          <li></li>
            </ul>
</div>      

4.实例化

$('.flexslider').flexslider({
    animation: "slide",//动画效果  fade/slide可选
    slideshowSpeed: 5000,//自动播放速度
    animationSpeed: 600,  //滚动效果播放时长
    slideDirection: "horizontal",//滑动方向 horizontal/vertical可选
    pausePlay: false,  //是否显示播放暂停按钮
    directionNav: false,
    slideshow: true,//载入页面时，是否自动播放
    touch: true,
    directionNav: true,  //Boolean:  (true/false)是否显示左右控制按钮
    controlNav: true,//是否显示下方导航小圆点
    //回调函数
    start: function() {},  
    before: function() {},  
    after: function() {},  
    end: function() {}
});

2.图片懒加载(依赖Juqery) https://appelsiini.net/projects/lazyload/v1/

1.引入js
<script type="text/javascript" src="plun-in/jquery-lazyload/jquery.lazyload.min.js" ></script>

2.在图片上增加data-original属性
<img class="lazy" data-original="img/example.jpg" width="640" height="480">

$(function() {
      $("img.lazy").lazyload({
        threshold : 200,默认会在图像出现在视口中加载，设置200 会在距离屏幕200像素时提前加载    
       placeholder: "loader.gif" //图片未加载成功显示图片
  });
});

3.flipsnap(手机屏幕水平滑动框架)

http://hokaccha.github.io/js-flipsnap/demo.html
<script src="../plun-in/flipsnap/flipsnap.min.js" type="text/javascript" charset="utf-8"></script>

<div class="viewport">
             <ul class="flipsnap">
              
               <li class="choiced">父母长寿</li>
               <li>魅力女人</li>
          
            </ul>
            <div class="cb"></div>
        </div>

var flipsnap = Flipsnap('.flipsnap', {
distance: 123,//每次移动的距离
maxPoint: 6 //最大移动个数
});

4.加载动画

引入common.css
<link rel="stylesheet" type="text/css" href="common/css/common.css">
html 代码

<div class="load">
        <div class="loader"></div>
    </div

3.在发送ajax请求之前和完成ajax请求时改变.load样式

        beforeSend: function() {
            $(".load").css({ "display": "flex" });
        },
 complete: function() {
            $(".load").css({ "display": "none" });
        }