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

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

amohan

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

阅读量291

点赞数

分类专栏：网站模版文章标签： jquery javascript 前端

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

版权

网站模版专栏收录该内容

3170 篇文章 31 订阅

订阅专栏

下载地址

相关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"); } });});