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

之前用原生写了些传统轮播，呼吸轮播。在学了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");
		}