您的位置：首页 > 其它

淡入淡出轮播(banner),自动按图片个数生成居中按钮——和派孔明

2016-06-16 15:04 423 查看

淡入淡出轮播(banner),自动按图片个数生成居中按钮

/*

1、JQuery带左右按钮淡入淡出轮播

2、轮播图根据图片数量自动生成按钮个数

3、在宽高不确定的情况下，居中元素

注：不管是菜鸟还是大神，若有bug，及时联系交流,QQ 2766588380;

闻道有先后，术业有专攻，所有的大神都是从菜鸟的道路上走出来的

*/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出轮播，banner</title>
<style>
*{margin:0;padding:0;}
.box{width:1290px;height:410px;overflow:hidden;position:relative;margin:30px auto;}
.box .banner{width:1290px;height:410px;margin:0 auto;overflow:hidden;position:relative;}
.box .banner img{width:1290px;height:410px;position:absolute;left:0;top:0;opacity:0;filter: alpha(opacity=0);}
.box .prev{width:35px;height:57px;position:absolute;left:0;top:50%;margin-top:-27px;background:#ccc;z-index:10;font-size:70px;line-height:57px;text-align: center;text-decoration:none;color:#fff;display:none;opacity:0.5;}
.box .next{width:35px;height:57px;position:absolute;right:0;top:50%;margin-top:-27px;background:#ccc;z-index:10;font-size:70px;line-height:57px;text-align: center;text-decoration:none;color:#fff;display:none;opacity:0.5;}
.box:hover .prev{display:block;}
.box:hover .next{display:block;}
.box .page{/*width:130px;*/position:relative;float:left;bottom:40px;left:50%;
}
.box .page a{position:relative; left:-50%;display:inline-block;width:22px;height:22px;background-color:#666;margin: 0px 10px;float:left;color:#fff;text-decoration:none;text-align: center;border-radius:50%;cursor: pointer;}
.box .page a.active{background-color:red;}
</style>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script>
$(function(){
var aPage = $(".box .page a");
var aImg = $(".box .banner img");
var iSize = $(".box .banner img").size();
var index = 0;

// 按照图片的多少自动生成点击按钮个数
(function(){
for (var i = 1; i <=aImg.length; i++) {
var allA = $("<a class='a'>"+i+"</a>");
$("#page").append(allA);
$("#page a").first().addClass('active');
};
//分页按钮点击
$(".box").on("click",".a",function(){
var _this = $(this).text() - 1;
change(_this);
});
})();

//左按钮
$("#prev").click(function() {
index--;
if (index==-1) {
index=iSize-1;
}
change(index);
});

//右按钮
$("#next").click(function() {
index++;
if (index==iSize) {
index=0;
}
change(index);
});

//封装切换函数
function change(index){
$(".a").eq(index).addClass('active').siblings().removeClass('active');
aImg.stop().eq(index).animate({opacity:1}, 1000).siblings().animate({opacity:0}, 1000);
};

//自动
function autoshow(){
index++;
if (index<iSize-1) {
change(index);
}else{
index=0;
change(index);
}
}

//鼠标移入显示，移除隐藏左右按钮
$(".box").mouseover(function() {
clearInterval(timer);
}).mouseout(function(event) {
timer=setInterval(autoshow,3000);
}).trigger('mouseout');

})
</script>
</head>
<body>
<div class="box">
<a id="prev" class="prev" href="javascript:;"><</a>
<a id="next" class="next" href="javascript:;">></a>
<div class="banner" id="banner">
<img style="opacity:1;filter:alpha(opacity=100);" src="images/banner1.png" alt="">
<img src="images/banner2.png" alt="">
<img src="images/banner3.png" alt="">
<img src="images/banner4.png" alt="">
<img src="images/banner3.png" alt="">
</div>
<div class="page" id="page">
<!--________________________________________________ -->
<!-- <a class="active" href="javascript:;">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a> -->
<!--________________________________________________ -->
</div>
</div>
</body>
</html>

http://blog.csdn.net/xyphf/article/details/51690506 宽高不确定的div居中方法

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航