基于jquery实现的图片渐变轮播图

我认为有两种基本的轮播图

一种是左右轮播的

一种是层次渐变的

今天就写一个层次渐变的轮播图：

类似于爱思助手官网，腾讯云上的轮播图轮播的方式，其实这种轮播图轮播方式的网站有很多，再次就不一一举例（当然也举不完）

接下来直接上代码：

页面代码直接复制就可以用。兼容ie7+
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>渐变轮播图</title>

	<style>
	*{margin: 0;padding: 0;}
	.banner{min-width:1366px;height:680px;position: relative;overflow: hidden;}
	.banner-cell{left: 0;top:0;position: absolute;}
	.indicator{min-width:10px;position: absolute;z-index: 9999;top:640px;margin-left:50%;}
	.indicator>div{width: 16px;height: 16px;background:#ccc;border-radius: 8px;float:left;margin-right:10px;cursor: pointer;}
	.indicator>div:first-child{background: #fff;}
	.clearfix{clear: both;*zoom: 1;}
	</style>
</head>
<body>
	<section class="banner">
		<!-- 轮播图内容 -->
		<div class="banner-cell"><img src="http://www.negroup.cn/imagesF/1460085486054ft7wh.jpg"></div>
		<div class="banner-cell"><img src="http://www.negroup.cn/imagesF/145983733985f5ty0.jpg"></div>
		<!-- 清除浮动 -->
		<div class="clearfix"></div>
		<!-- 轮播图指示器 -->
		<div class="indicator"></div>
	</section>
	<script src="http://apps.bdimg.com/libs/jquery/1.8.0/jquery.min.js"></script>
	<script>
	var bannerCell;
	bannerCell = $('.banner-cell');
	// 页面渲染让第一个轮播图放在首屏
	bannerCell.eq(0).show();
	// 遍历轮播图一共多少个，然后遍历，添加同样个数的指示器
	$.each(bannerCell,function(){
		var indicatorCell = '<div></div>';
		$('.indicator').append(indicatorCell);
	});
	// 遍历指示器，添加点击事件
	$('.indicator>div').each(function(){

		$(this).click(function(){
			$(this).css('background','#fff').siblings().css('background','#ccc');

			var index = $(this).index();
			var bannerCellIndex = $('.banner-cell').eq(index);
			// jquery的animate动画函数
			bannerCellIndex.animate({
				opacity:0
			},function(){

				bannerCellIndex.css({
					'z-index': 1,
					'opacity': 1
				});

				bannerCellIndex.siblings().css({
					'z-index':'2'
				})

			})
		})
	})
	</script>
</body>
</html>

posted @ 2018-02-14 18:51  一只京大  阅读(350)  评论(0)    收藏  举报