多功能响应式兼容IE8图片轮播
2016-09-27 10:02:56
前段时间在写一个官网，官网中很多地方都用到了图片轮播，但是需求中要求网站适配到IE8同时具有自适应的特点，适配各种尺寸的浏览器和移动端浏览器。于是我尝试了在网上查找相关的代码，但遗憾的是很多插件要么兼容IE8，但是不支持响应式，要么支持响应式不支持IE8，万恶的IE8很是让人头疼。于是，自己就写了一个响应式的轮播插件，并兼容IE8浏览器。
先来看一下程序的html部分代码
<div class="slide" id="lun1">
<div class="carouse">
<div class="slideItem">
<img class="banner-img" src="img/index_banner.png" >
</div>
<div class="slideItem">
<img class="banner-img" src="img/index_banner.png" >
</div>
<div class="slideItem">
<img class="banner-img" src="img/index_banner.png">
</div>
<div class="slideItem">
<img class="banner-img" src="img/index_banner.png">
</div>
<a class="carousel-control left Next"></a>
<a class="carousel-control right Previous"></a>
</div>
</div>这是一个最基本的版本，包括在外层的一个div，内部每一个slideItem为一个轮播层，下面来个a标签代表的是左右箭头。如果说需要底部圆点，只需要加入下面的代码即可
<!-- 轮播底部圆点 -->
<div class="dotList"></div>将这段代码加入到carouse下方即可。
调用方式为
$("#lun1").slide({
autoplay:true,
autoTime:4000,
});那么这个轮播插件就只有这些功能吗？当然不是。我在这个插件中总共写了4个功能，分别是：
1.普通的不带圆点带左右箭头的图片轮播
2.带底部圆点和左右箭头的图片轮播
3.带底部圆点和左右箭头，同时轮播下方文字跟随轮播
4.点击排列在页面的图片，弹出层出现轮播。
具体效果可以点击下方的演示按钮查看，并且可以点击下载按钮下载源码。
更新
新增移动端可以通过滑动切换轮播效果
修复网络慢时图片显示bug
注：如果下方链接失效，请点击此处下载，密码为：ysaj
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016-09-27，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录