如何制作兼容性很高的网页（主求性价比，ie9）
一,slick.js使用方法：
引用文件：<link rel="stylesheet" href="style/slick.css">
<script src="script/jquery.min.js"></script>
<script src="script/slick.min.js"></script>
编写html代码：<div class="slick">
<div><a href="http://www.youjiaapp.com"><img src="images/1.jpg" alt=""></a></div>
<div><a href="http://www.youjiaapp.com"><img src="images/2.jpg" alt=""></a></div>
<div><a href="http://www.youjiaapp.com"><img src="images/3.jpg" alt=""></a></div>
<div><a href="http://www.youjiaapp.com"><img src="images/4.jpg" alt=""></a></div>
<div><a href="http://www.youjiaapp.com"><img src="images/5.jpg" alt=""></a></div>
</div>
编写js代码：$(function(){
$('.slick').slick({
dots: true, //分页器
arrow:true,//左右箭头
pauseHove: false, //鼠标悬停是否停止不动
infinite: true, //是否循环
slidesToShow:3, //一行几列
});
});
二，案例：
案例1：首页轮播大图：
html代码：
<div class="banner1" id="indexbanner1">
<a href="http://www.youjiaapp.com"><img src="images/1.jpg" width="100%"/> </a>
<a href="http://www.youjiaapp.com"><img src="images/1.jpg" width="100%"/> </a>
<a href="http://www.youjiaapp.com"><img src="images/1.jpg" width="100%"/> </a>
</div>
基本js代码： $('.banner1').slick({
swipe: true,
arrows: false,
dots: true,
fade: true,
cssEase: 'linear',
speed: 500,
autoplaySpeed: 2500,
autoplay: true,
pauseHove: false,
infinite: true
});
案例2:3行轮播产品图：
html代码：
<ul id="about4">
<li class="each-item">
<a href="http://www.youjiaapp.com" class="picture" >
<img src="images/01.jpg" width="340" height="440"/>
<div class="lans">国家级高新企业</div>
</a>
</li>
<li class="each-item">
<a href="http://www.youjiaapp.com" class="picture" >
<img src="images/03.jpg" width="340" height="440"/>
<div class="lans">ISO9001质量认证</div>
</a>
</li>
<li class="each-item">
<a href="http://www.youjiaapp.com" class="picture" >
<img src="images/03.jpg" width="340" height="440"/>
<div class="lans">ISO9001质量认证</div>
</a>
</li>
<li class="each-item">
<a href="http://www.youjiaapp.com" class="picture" >
<img src="images/01.jpg" width="340" height="440"/>
<div class="lans">国家级高新企业</div>
</a>
</li>
<li class="each-item">
<a href="http://www.youjiaapp.com" class="picture" >
<img src="images/03.jpg" width="340" height="440"/>
<div class="lans">ISO9001质量认证</div>
</a>
</li>
<li class="each-item">
<a href="http://www.youjiaapp.com" class="picture" >
<img src="images/03.jpg" width="340" height="440"/>
<div class="lans">ISO9001质量认证</div>
</a>
</li>
</ul>Js代码：
$(function () { $('#about4').slick({ pauseHove: false, infinite: true, slidesToShow:3, arrow: true }); })
二，与swiper相比的优缺点：优点：
排序简单，便于操作与上手；
与swiper相比，Js和css包轻便，占据内存较少；
兼容性良好，兼容到ie7及以上；
容易制作动画效果，比swiper少引入一个css文件包。
缺点：
太过于复杂的效果，不易制作；
效果动画，需要自己手写较多，不太适合懒癌患者；
在某些环境下，swiper会比其好一些。如3D效果（slick.js不支持）
使用slick.js应注意的点：
css和js包应该加载正确；
Css代码上需要写上：
.slick-slide:focus, .slick-slide a:focus {outline: none;}
原因：slick插件里进行拖拽时，会出现默认的蓝色边框.如图：
附上，一些上文未讲过的slick.js基本属性：
1.accessibility为 true时，可以通过键盘的tab键和方向键进行操作
2.adaptiveHeight为true时，每个滑块的高度与内容的高度相一致
3.autoplay为true时，可以使选项卡自动滑动
4.cssEase为'ease'时，采用css3的ease属性，即滑动的时候滑块的速度逐渐变慢
5.edgeFriction为0时，滑动到最后一张图片时，图片不能再滑动。
6.infinite为false时，不能无限循环。
7.initialSlide为1时，就从第1张滑块开始滑动。
