基于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>