前端js轮播特效

来源：互联网发布：淘宝怎么设置区间价格编辑：程序博客网时间：2024/05/22 13:34

/** * 轮播动画 */function caroAdveAnimate(){var currNav = 0;var timer = "";var caroWidth = 560;var imgArea = $("#adv_ul");var navArr = $("#adv_nav_ul").find("a");var imgNum = navArr.length;var delay = 5000;var aniSpeed = 500;var onClass = "red-feedback";loopImg();startTimer();bindNavClick();function loopImg(){imgArea.append(imgArea.children(":first").clone());}function bindNavClick(){navArr.click(function(){var nav = navArr.index($(this));if(currNav != nav){animate(nav);}});}function startTimer(){timer = setInterval(autoAnimate, delay);}function restartTimer(){clearInterval(timer);startTimer();}function autoAnimate(){if(currNav == 0){imgArea.css("margin-left","0px");}currNav++;imgArea.animate({"margin-left":caroWidth*(-currNav)}, aniSpeed);if(currNav >= imgNum){currNav = 0;}changNav(currNav);}function animate(nav){imgArea.stop().animate({"margin-left":caroWidth*(-nav)}, aniSpeed);currNav = nav;changNav(nav);restartTimer();}function changNav(nav){navArr.removeClass(onClass);navArr.eq(nav).addClass(onClass);}}

0 0