jQuery制作3D立体螺旋动画焦点轮播图切换插件

瓦窑源码   2020-07-27   收藏本文
这是一款jQuery制作3D立体螺旋动画焦点轮播图切换插件,视觉效果非常吸睛,图片切换方式类似垂直的螺旋叶片旋转。

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

js代码
<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>

具体效果看下方【演示地址】吧^_^

jQuery制作3D立体螺旋动画焦点轮播图切换插件

演示地址 下载地址A 下载地址B

相关特效

    暂无数据
免责声明:本站模板均来自用户分享和网络收集,仅供学习与参考,请勿用于商业用途,若损害您的权利,请联系网站客服,核实后立即删除。
展开