之前用原生写了些传统轮播，呼吸轮播。在学了jquery后感觉是如此的简单，一个小白白的心情此时无与伦比。想和大家分享一下var $carousel = $(".carousel"); var $m_unit = $(".m_unit"); var $imageLis = $(".m_unit li"); var $cilclesLis = $(".circles ol li"); //克隆图片第1张 $(".m_unit ul").append($imageLis.eq(0).clone()); //信号量 var idx = 0; //定时器 var timer = setInterval(rightBtnHandler, 2000); //鼠标进入定时器停止 $carousel.mouseenter(function(){ clearInterval(timer); }); $carousel.mouseleave(function(){ timer = setInterval(rightBtnHandler, 2000); }); //监听 $(".rightBtn").click(rightBtnHandler); function rightBtnHandler(){ //函数截流 if($m_unit.is(":animated")) return; //具体业务 idx++; $m_unit.animate({"left" : -560 * idx},300,function(){ if(idx >4){ idx = 0; $m_unit.css("left",0); } }); changeCircle(); } //监听 $(".leftBtn").click(function(){ //函数截流 if($m_unit.is(":animated")) return; //具体业务 idx--; if(idx < 0){ idx = 4; $m_unit.css("left",-5 * 560); } $m_unit.animate({"left" : -560 * idx},300); changeCircle(); }); //小圆点的监听 $cilclesLis.click(function(){ //你点击第几个小圆点，信号量就是多少 idx = $(this).index(); //拉动 $m_unit.animate({"left" : -560 * idx},300); //更改小圆点 changeCircle(); }); //更改小圆点 function changeCircle(){ var n = idx<= 4 ? idx : 0; //让信号量那个小圆点有cur，其他小圆点没有cur $cilclesLis.eq(n).addClass("cur").siblings().removeClass("cur"); }
未经允许不得转载： ICode联盟 » 插件特效 » jquery简单图片切换轮播插件原生js呼吸轮播特效