jquery.roundabout - 图片倾斜效果幻灯片带箭头和索引

最新推荐文章于 2022-08-21 10:14:22 发布

转载最新推荐文章于 2022-08-21 10:14:22 发布 · 333 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yy123.ink/frontDetail/12286

文章标签：

#jquery #javascript #前端

网站模版专栏收录该内容

3170 篇文章

订阅专栏

这段代码展示了如何利用jQuery和roundabout插件创建一个3D旋转的图片轮播效果。用户可以通过点击按钮或者使用键盘左右箭头来切换图片，同时在切换时有平滑的过渡动画。轮播焦点改变时，对应的导航按钮会高亮显示。

下载地址

相关js代码$(document).ready(function(){ $("#img-slider li").bind({ reposition: function() { var degrees = $(this).data("roundabout").degrees, roundaboutBearing = $(this).parent().data("roundabout").bearing, rotateY = Math.sin((roundaboutBearing - degrees) * (Math.PI/180)) * 9; $(this).css({ "-webkit-transform": "rotate(" + rotateY + "deg)", "-moz-transform": "rotate(" + rotateY + "deg)", "-ms-transform": "rotate(" + rotateY + "deg)", "-o-transform": "rotate(" + rotateY + "deg)", "transform": "rotate(" + rotateY + "deg)" }); } }); $(".jQ_sliderPrev").on("click", function(){ $("#img-slider").roundabout("animateToNextChild"); return false; }); $(".jQ_sliderNext").on("click", function(){ $("#img-slider").roundabout("animateToPreviousChild"); return false; }); $("body").on("keyup", function(e) { var keyCode = e.which || e.keyCode; if(keyCode == 37) { $("#img-slider").roundabout("animateToPreviousChild"); e.preventDefault(); return false; } else if(keyCode == 39) { $("#img-slider").roundabout("animateToNextChild"); e.preventDefault(); return false; } }); $(".jQ_sliderSwitch li").on("click", function() { var $elem = $(this); var index = $elem.index(); $("#img-slider").roundabout("animateToChild", index); return false; }); $("#img-slider").roundabout({ minScale: 0.4, maxScale: 0.9, duration: 750 }).bind({ animationEnd: function(e) { var index = $("#img-slider").roundabout("getChildInFocus"); $(".jQ_sliderSwitch li").removeClass("active"); $(".jQ_sliderSwitch li").eq(index).addClass("active"); } });});