结业项目部分插件介绍

结业项目我用了很多插件
框架就不介绍了，因为大家都会用
swiper 实现轮播的插件
优点：
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
缺点：
与mui底层封装的代码产生冲突
基本结构

    ...
    


    ...
    
    ...

轮播代码：
HTML结构

css样式

.banner{width: 100%;}
.banner ul li img{width: 100%;display: block;}
.banner .sp01 span{background-color: #fff;opacity: .7;}
.banner .sp01 .swiper-pagination-bullet-active{background-color: white;background-color: #ffe037; opacity: 1;}

js代码

 var swiper = new Swiper('.banner', {
                        pagination: '.sp01',
                        paginationClickable: true,
                        autoplay: "3000",
                        loop: "ture",
                        speed: 500,
                        autoplayDisableOnInteraction: false,
                    });

3. fancybox 弹出窗口的插件
基于jQuery的一款插件
a链接的href可以指向图片和地址，a标签也可以包含图片、inline内容、iframe框架，创建一个链接元素
fancybox中的一些常用参数

  padding          	跟css里的padding差不多意思                
  imageScale       	如果为true，则图片会被缩放以适应窗口              
  zoomOpacity      	如果为true，则在动画过程中内容的透明度会改变          
  overlayShow      	如果为true，则显示遮罩，默认为false            
  overlayOpacity   	遮罩的透明度，值为0--1                     
  centerOnScroll   	值为true的话，当用户滚动页面时，内容会一直居中显示       
  frameWidth/height	iframe和inline框口的默认宽度/高度           
  zoomSpeedIn      	zooming-in动画时的速度，单位为毫秒。0的话动画将不会出现 
  zoomSpeedOut     	zooming-out动画时的速度，单位为毫秒。0的话动画将不会出现
  zoomSpeedChange  	切换图片时的动画速度，单位为毫秒。值为0的话将不会出现动画     

方法

 		$.fancybox.showActivity 显示加载动画  
         $.fancybox.hideActivity 隐藏加载动画  
         $.fancybox.close 关闭窗口  
         $.fancybox.resize 自动调整窗口的高度使之与内容相适应