CSS3制作轮播图切割效果

炫酷CSS3切割效果轮播图

html,body,div{

margin: 0;

padding: 0;

}

body{ background-color: #232323}

.slider-outer{

width: 560px;

height: 300px;

margin: 150px auto;

background-color: #f60;

position: relative;

}

.img-item{

position: absolute;

width: 112px;

height: 100%;

background-color: #f10;

transition: all 1.5s;

/*设置子元素在3D空间中呈现*/

transform-style: preserve-3d;

}

/*让图片可以构成一个有四个面的长方体 start*/

.img{

width: 100%;

height: 100%;

position: absolute;

background-size: cover;

}

.img:nth-child(1){

background: url(images/1.png) no-repeat;

transform: rotateX(0deg) translateZ(150px);

}

.img:nth-child(2){

background: url(images/2.png) no-repeat;

transform: rotateX(-90deg) translateZ(150px);

}

.img:nth-child(3){

background: url(images/3.png) no-repeat;

transform: rotateX(-180deg) translateZ(150px);

}

.img:nth-child(4){

background: url(images/4.png) no-repeat;

transform: rotateX(-270deg) translateZ(150px);

}

/*让图片可以构成一个有四个面的长方体 end*/

.btns{

position: absolute;

top: 50%;

width: 100%;

height: 70px;

margin-top: -35px;

}

.prev,

.next{

width: 70px;

height: 70px;

line-height: 70px;

text-align: center;

background-color: rgba(0,0,0,.3);

color: #fff;

font-size: 30px;

cursor: pointer;

position: absolute;

}

.prev{

left: 0;

}

.next{

right: 0;

}

$(function (){

var num = 0;

$("#j_silder_outer .img-item").each(function(index, el) {

$(this).css({

"left":$(this).width() * index + "px",

/*让每个img-item延时一定时间执行动画*/

"transitionDelay": index * 0.3 + "s"

} );

$(this).find(".img").css({

"backgroundPosition": -$(this).width() * index + "px"

} ); ;

} );

$(".prev").on("click",function (){

$("#j_silder_outer .img-item").css("transform", "rotateX(" + (++num * 90) + "deg)");

} );

$(".next").on("click",function (){

$("#j_silder_outer .img-item").css("transform", "rotateX(" + (--num * 90) + "deg)");

} );

var timejg=4000; //轮播间隔时间

var time = setInterval(move,timejg);

function move(){

$("#j_silder_outer .img-item").css("transform", "rotateX(" + (--num * 90) + "deg)");

}

$('.slider-outer').hover(function(){

clearInterval(time);

} ,function(){

time = setInterval(move,timejg);

} );

} )

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！