RedSpite
全屏自适应 热点图轮播banner简洁代码
在我才从零开始接触前端时，学的第一个特效就是banner轮播。js语言和c语言有很多相似之处，所以真是庆幸大学有好好考计算机二级呀。。汗！
初级小白通过自己一点一点摸索，总算写出了这个自适应大小的banner轮播图，可以无缝轮播，并自适应屏幕大小按比例缩小图片。
不过有个bug 。。 哈哈哈 只能用左右切换的方式轮播，因为整体div高度是自适应变化的，没有写死。
如果用淡入淡出效果，会有一个间隔时间整个div高度为零，下面的内容就会被挤上来
解决的方法是用window.resize 获取图片高度，再赋给div。但是我比较喜欢左右切换的效果，所以就没写啦~ 哈哈哈
HTML:
-
-
-
-
CSS:
.banner_div{ //最外部div容器
width:100%;
height:auto;
overflow: hidden;
position: relative;
}
.banner_img{ //图片列表
width:400%;
height:auto;
}
.banner_img li{
width: 25%;
height:auto;
float: left;
}
.banner_img li img{
width:auto;
height:auto;
max-width: 100%;
max-height:100%;
}
.banner_num{ //小圆点
position: absolute;
bottom: 1vh;
width: 100%;
text-align: center;
}
.banner_num li{
float: none;
display: inline-block;
width: 12px;
height: 12px;
margin:0 5px;
border-radius: 50%;
border: 2px solid #d9edf7;
background: #fff;
box-sizing: border-box;
cursor:pointer;
}
.banner_num li.active{
background: #75aaa2;
border: 2px solid #fff;
}
JS:
//banner 圆点生成
var size = $(".banner_img li").length;
for (var j = 1; j < size; j++) {
var _html = '';
$(".banner_num").append(_html);
}
//第一个小圆点加激活样式
$(".banner_num li:first-child").addClass("active");
var i = 0;
var t = setInterval(move, 4000);
//鼠标滑过清除轮播定时器
$(".banner_div").hover(function () {
clearInterval(t);
}, function () {
t = setInterval(move, 4000);
});
//圆点点击 显示相应banner
$(".banner_num li").click(function () {
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
i = index;
if (i == 0) {
i = size - 1;
}
var left = -i * (100) + "%";
$(".banner_img").css("marginLeft", left);
});
//banner 轮播函数
function move() {
i++;
if (i == size - 1) {
show();
$(".banner_num li").eq(0).addClass("active").siblings().removeClass("active");
} else if (i == size) {
//无缝轮播的重点！ 轮播到最后一张banner时定位到第一张banner
$(".banner_img").css("margin-left", "0");
i = 1;
show();
} else {
show();
}
}
function show() {
var left = -i * (100) + "%";
$(".banner_img").animate({marginLeft: left}, 500);
$(".banner_num li").eq(i).addClass("active").siblings().removeClass("active");
}
2016.07.26
© RedSpite | 蜀ICP备16004270号