欢迎您光临深圳市百域网络科技有限公司!
电话图标 咨询热线:13724519901 免费注册
龙岗

龙岗

这里象征着我们的态度和能力

如何制作兼容性很高的网页(主求性价比,ie9)

发表日期:2019-06-26 文章编辑:百域网络 浏览次数:358

上个月写到一些基本属性操作,这个月我主要从轮播图出发。在兼容ie9上,我写到一篇swiper3兼容ie9的文章,但是发现改版的swiper3不是想象那么好。又通过网络搜索,转为使用slick.js。
一,slick.js使用方法:
引用文件:<linkrel="stylesheet"href="style/slick.css">
<scriptsrc="script/jquery.min.js"></script>
<scriptsrc="script/slick.min.js"></script>
编写html代码:<divclass="slick">
<div><ahref="http://www.szfangwei.cn"><imgsrc="images/1.jpg"alt=""></a></div>
<div><ahref="http://www.szfangwei.cn"><imgsrc="images/2.jpg"alt=""></a></div>
<div><ahref="http://www.szfangwei.cn"><imgsrc="images/3.jpg"alt=""></a></div>
<div><ahref="http://www.szfangwei.cn"><imgsrc="images/4.jpg"alt=""></a></div>
<div><ahref="http://www.szfangwei.cn"><imgsrc="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.szfangwei.cn"><imgsrc="images/1.jpg" width="100%"/> </a>
<a href="http://www.szfangwei.cn"><imgsrc="images/1.jpg" width="100%"/> </a>
<a href="http://www.szfangwei.cn"><imgsrc="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.szfangwei.cn" 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.szfangwei.cn" 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.szfangwei.cn" 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.szfangwei.cn" 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.szfangwei.cn" 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.szfangwei.cn" 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张滑块开始滑动。


如何制作兼容性很高的网页(主求性价比,ie9)由百域网络编辑 http://www.baiyu88.com/longgan/378.html 如需转载请注明出处

相关新闻
最新新闻
随机新闻
最新网站设计案例
  • 我们能做什么

    东莞百域网络网络科技有限公司提供东莞龙岗企业网站、购物商城、行业门户网站、手机网站等各类网站应用的设计与开发,十年时间坚持量身定制,为客户打造新颖精美,紧密结合客户需求的网站,也更加注重性价比,以求把更多的实惠带给千千万万的客户。我们制作的网站均由工作多年的设计师一对一量身设计,力求每一款设计都独具匠心。

  • 我们的优势

  • 更多 +关于我们

    我们是一家专注龙岗网站建设、龙岗网站设计、龙岗网站优化、东莞龙岗网站优化、龙岗网站建设、龙岗网站推广、龙岗网站设计、龙岗网站制作、龙岗网页设计、龙岗网页制作、龙岗网络公司;我们凭借在网站建设领域专业的技术和多年的行业经验,先后为众多企业提供了优质的建站服务,获得行业的高度认可。

Copyright版权所有@2019深圳市百域网络科技有限公司

快捷导航
网站建设

咨询电话

13724519901
×