不管是自己写还是使用别人的插件，轮播图我想作为前端并不陌生。以前自己写过的轮播图基本都是通过改变left的值或者使用css的transform去实现。今天想通过改变z-index去实现它。于是就写了一个仿简书首页轮播的小插件。
废话不多说，直接上代码。
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/carousel.css">
<style>
#banner{
width:1000px;
}
</style>
<title>轮播</title>
</head>
<body>
<div class='container'>
<div id='banner'></div>
</div>
<script src='./js/jquery.js'></script>
<script src='./js/carousel.js'></script>
<script>
window.onload = function(){
var banner = new Carousel();
//图片地址数组。不要少于三张
var imgSrcDate = ["./public/img/01.jpg","./public/img/02.jpg","./public/img/03.jpg","./public/img/04.jpg","./public/img/05.png","./public/img/06.jpg"];
banner.init({
container:"#banner",
datas:imgSrcDate,
autoplaySpeed:5000,
autoplay:false
});
}
</script>
</body>
</html>css代码：
/* 公共样式 */
.pull-left{
float: left!important;
}
.pull-right{
float: right!important;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
ul,li{
margin:0;
padding:0;
list-style-type: none;
}
/* 轮播图插件样式 */
.carousel-box{
position: relative;
width:100%;
}
.transverse-box{
position: relative;
width:66.7%;
}
.img-item{
position: absolute;
top:0;
left:0;
z-index: 0;
}
.vertical-box{
position: relative;
width:33.3%;
}
.vertical-box ul{
overflow: hidden;
}
.img-item{
transition: width 1s;
}
.img-item img{
width:100%;
height:100%;
}
.vertical-box ul li{
font-size: 0;
}
.vertical-box ul li img{
width:100%;
height:100%;
}
.left-arrow{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top:50%;
left:0px;
color:#fff;
margin-top:-35px;
font-size: 50px;
font-weight: 200;
text-align: center;
line-height: 100px;
width:50px;
height:70px;
background:rgba(0,0,0,0.6);
cursor: pointer;
z-index: 99;
}
.right-arrow{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top:50%;
right:0px;
color:#fff;
margin-top:-35px;
font-size: 50px;
font-weight: 200;
text-align: center;
line-height: 100px;
width:50px;
height:70px;
background:rgba(0,0,0,0.6);
cursor: pointer;
z-index: 99;
}js代码：
var Carousel = function () {
};
Carousel.prototype = {
//容器选择器
container:"",
//图片地址数组
datas:null,
autoplaySpeed:null,
autoplay:false,
// 初始化
init:function(options){
this.container = options.container;
this.datas = options.datas;
this.autoplaySpeed = options.autoplaySpeed;
this.autoplay = options.autoplay;
$(this.container).html("");
this.createCarousel(options);
this.arrowHover();
this.tabImg();
this.setZindex();
//判断是否需要自动播放
if(options.autoplay || this.autoplay == true){
this.autoPlay(this.autoplaySpeed);
}else{
console.log(0);
return;
}
},
createCarousel:function(options){
this.createDOM(this.container,options);
},
// 生成DOM
createDOM:function(container,options){
console.log(options);
var html = "";
html = "<div class='carousel-box clearfix'>"+
"<div class='transverse-box pull-left'>"+
"</div>"+
"<div class='vertical-box pull-right'>"+
"<ul>"+
"</ul>"+
"</div>"+
"<span class='left-arrow'>‹</span>"+
"<span class='right-arrow'>›</span>"+
"</div>";
$(container).html(html);
var imgLength = options.datas.length;
for(var i = 0;i<imgLength;i++){
$(".transverse-box").append("<div class='img-item'><img src='"+options.datas[i]+"'></div>");
};
$(".vertical-box ul").append("<li><img src='"+options.datas[1]+"'></li>");
$(".vertical-box ul").append("<li><img src='"+options.datas[2]+"'></li>");
},
arrowHover:function(){
$(".carousel-box").hover(function(){
$(".left-arrow,.right-arrow").css("display","flex");
},function(){
$(".left-arrow,.right-arrow").css("display","none");
})
},
// 点击左右箭头触发翻页
tabImg:function(){
var obj = this;
$(".left-arrow").on("click",function(){
obj.changeZindex_add();
})
$(".right-arrow").on("click",function(){
obj.changeZindex_sub();
})
},
// 设置初始zindex
setZindex:function(){
//左侧横向TAB
var imgNum = $(".transverse-box").find(".img-item").length;
for(var i = 0;i<imgNum;i++){
$(".img-item").eq(i).css({
"zIndex":i
});
$(".img-item").eq(i).attr("Zindex",i);
}
},
//前翻
changeZindex_add:function(){
var imgNum = $(".transverse-box").find(".img-item").length;
var lastZindex = $(".transverse-box").find(".img-item").eq(length-1).attr("zindex");
var firstImgSrc = $(".transverse-box").find(".img-item").eq(0).find("img").attr("src");
var lastImgSrc = $(".transverse-box").find(".img-item").eq(length-1).find("img").attr("src");
var last2ImgSrc = $(".transverse-box").find(".img-item").eq(length-2).find("img").attr("src");
$(".transverse-box").find(".img-item").eq(0).remove();
$(".transverse-box").append("<div class='img-item' zindex='"+(parseInt(lastZindex)+1)+"'><img src='"+firstImgSrc+"'><div>");
$(".vertical-box ul").find("li").eq(0).find("img").attr("src",lastImgSrc);
$(".vertical-box ul").find("li").eq(1).find("img").attr("src",last2ImgSrc);
$(".transverse-box").find(".img-item").eq(length-1).css({
"zIndex":parseInt(lastZindex)+1,
"opacity":0
},500);
$(".transverse-box").find(".img-item").eq(length-1).animate({
"opacity":1
},500);
},
// 后翻
changeZindex_sub:function(){
var imgNum = $(".transverse-box").find(".img-item").length;
var lastZindex = $(".transverse-box").find(".img-item").eq(length-1).attr("zindex");
var firstZindex = $(".transverse-box").find(".img-item").eq(0).attr("zindex");
var lastImgSrc = $(".transverse-box").find(".img-item").eq(length-1).find("img").attr("src");
var firstImgSrc = $(".transverse-box").find(".img-item").eq(0).find("img").attr("src");
var first2ImgSrc = $(".transverse-box").find(".img-item").eq(1).find("img").attr("src");
$(".transverse-box").find(".img-item").eq(length-1).remove();
$(".transverse-box").prepend("<div class='img-item' zindex='"+(parseInt(firstZindex)-1)+"'><img src='"+lastImgSrc+"'><div>");
$(".vertical-box ul").find("li").eq(0).find("img").attr("src",firstImgSrc);
$(".vertical-box ul").find("li").eq(1).find("img").attr("src",first2ImgSrc);
$(".transverse-box").find(".img-item").eq(0).css({
"zIndex":parseInt(firstZindex)-1
}).siblings().css("opacity","0");
$(".transverse-box").find(".img-item").eq(length-1).animate({
"opacity":1
});
},
// 自动播放
autoPlay:function(x){
var obj = this;
this.changeZindex_add();
setTimeout(function(){obj.autoPlay(x)},x);
}
}
功能非常有限。宽度自适应外部容器。有兴趣的同学可以扩展它的功能哦。