利用css3d转换,通过css控制和js控制节点的移除增加实现一个简单的轮播图
<div class="swiperCont clearx" id="stage">
<div class="list">1</div>
<div class="list" style="background: chartreuse;">2</div>
<div class="list" style="background: saddlebrown;">3</div>
<div class="list" style="background: aqua;">4</div>
<div class="list" style="background: wheat;">5</div>
</div>
.swiperCont{height: 400px;background: url(../img/jiameng/swiperBg.png) no-repeat bottom center;background-size:100% auto;}
.swiperCont {
width: 1200px;
height: 396px;
margin: 0 auto;
padding: 74px 0;
position: relative;
overflow: hidden;
}
.swiperCont .list {
width: 434px;
height: 322px;
background: green;
position: absolute;
border-radius: 10px;
transition: all .3s;
}
.swiperCont .list:nth-child(1){
left: -220px;
transform: perspective(1200px) rotateY(-65deg) scale(0.6);
}
.swiperCont .list:nth-child(2){
left: 0px;
transform: perspective(1200px) rotateY(-40deg) scale(0.8);
}
.swiperCont .list:nth-child(3){
left:400px;
transform: perspective(1200px) rotateY(0deg);
}
.swiperCont .list:nth-child(4){
left: 800px;
transform: perspective(1200px) rotateY(40deg) scale(0.8);
}
.swiperCont .list:nth-child(5){
left: 1000px;
transform: perspective(1200px) rotateY(65deg) scale(0.6);
}
.swiperCont .list:nth-child(6){
left: 1200px;
transform: perspective(1200px) rotateY(65deg) scale(0.6);
}
setInterval(function(){
var caheHtml = $('.list').eq(0).html();
$('.list').eq(0).css({
'left': -400
})
setTimeout(function(){
$('.list').eq(0).remove()
},50)
$('.swiperCont').append('<div class="list" style="background: wheat;">'+caheHtml+'</div>')
},1000)
或者原生js
setInterval(function(){
var ele = document.getElementsByClassName('list')[0],
elePar = ele.parentNode,
cacheHtml = ele.innerHTML;
ele.style.left = '-400px';
setTimeout(function(){
elePar.removeChild(ele);
},50)
var div = document.createElement("div");
div.setAttribute("class", "list");
div.innerHTML = cacheHtml;
elePar.appendChild(div);
},1000)