html轮播图兼容ie8,多功能响应式兼容IE8图片轮播

2016-09-27 10:02:56

前段时间在写一个官网，官网中很多地方都用到了图片轮播，但是需求中要求网站适配到IE8同时具有自适应的特点，适配各种尺寸的浏览器和移动端浏览器。于是我尝试了在网上查找相关的代码，但遗憾的是很多插件要么兼容IE8，但是不支持响应式，要么支持响应式不支持IE8，万恶的IE8很是让人头疼。于是，自己就写了一个响应式的轮播插件，并兼容IE8浏览器。

先来看一下程序的html部分代码

这是一个最基本的版本，包括在外层的一个div，内部每一个slideItem为一个轮播层，下面来个a标签代表的是左右箭头。如果说需要底部圆点，只需要加入下面的代码即可

将这段代码加入到carouse下方即可。

调用方式为

$("#lun1").slide({

autoplay:true,

autoTime:4000,

});

那么这个轮播插件就只有这些功能吗？当然不是。我在这个插件中总共写了4个功能，分别是：

1.普通的不带圆点带左右箭头的图片轮播

2.带底部圆点和左右箭头的图片轮播

3.带底部圆点和左右箭头，同时轮播下方文字跟随轮播

4.点击排列在页面的图片，弹出层出现轮播。

具体效果可以点击下方的演示按钮查看，并且可以点击下载按钮下载源码。

更新

新增移动端可以通过滑动切换轮播效果

修复网络慢时图片显示bug

注：如果下方链接失效，请点击此处下载，密码为：ysaj