特效介绍

这是一款jQuery制作3D立体螺旋动画焦点轮播图切换插件，视觉效果非常吸睛，图片切换方式类似垂直的螺旋叶片旋转。

<script src="jquery-1.11.3.min.js"></script>

<script type="text/javascript">

$(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);

});

 

 

})

</script>

具体效果看右侧的【在线演示】吧^_^

TAG标签：3D立体螺旋轮播图

上一个：jQuery极具创意的层叠文字焦点轮播图切换动画特效
下一个：jQuery制作古典风格手风琴图片切换收缩特效