jquery简单图片切换轮播插件原生js呼吸轮播特效

jquery简单图片切换轮播插件原生js呼吸轮播特效4798
jquery简单图片切换轮播插件原生js呼吸轮播特效4799
之前用原生写了些传统轮播,呼吸轮播。在学了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");		}

也许你还喜欢