多功能响应式兼容IE8图片轮播 - 成就云开发者社区

2016-09-27 10:02:56

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

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

代码语言：javascript

复制

<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标签代表的是左右箭头。如果说需要底部圆点，只需要加入下面的代码即可

代码语言：javascript

复制

<!-- 轮播底部圆点 -->
	<div class="dotList"></div>

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

调用方式为

代码语言：javascript

复制

$("#lun1").slide({
		autoplay:true,
		autoTime:4000,
	});

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

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

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

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

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

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

更新

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

修复网络慢时图片显示bug

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