jQuery实现左右切换轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.wrap{
				position: relative;
				width: 500px;
				height: 375px;
				margin: 0 auto;
				border: 1px solid #333;
			}
			ul{list-style: none;}
			ul>li{
				display: none;
			}
			img{
				display: block;
				width: 500px;
			}
			#num{
				position: absolute;
				top: 0;
				width: 100%;
				text-align: center;
				background-color: rgba(0,0,0,.4);
			}
			button{
				width: 40px;
				height: 50px;
				font-size: 40px;
				opacity: .6;
			}
			button:first-of-type{
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
			}
			button:last-of-type{
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
			}
			.men{
				position: absolute;
				bottom: 25px;
				left: 50%;
				transform: translateX(-50%);
			}
			.men>span{
				display: inline-block;
				width: 15px;
				height: 15px;
				background-color: #eee;
				border-radius: 50%;
				border: 2px solid #fff;
			}
			#txt{
				position: absolute;
				bottom: 0;
				left: 50%;
				font-size: 20px;
				transform: translateX(-50%);
			}
			.wrap .ac{
				display: block;
			}
			.wrap .active{
				background: red;
			}
		</style>
		<script src="./js/jquery-1.10.1.js"></script>
		<script type="text/javascript">
			$(function(){
				//声明一个数组  记录所有图片的地址
				var img = ['./images/1.jpg','./images/2.jpg','./images/3.jpg','./images/4.jpg',];
				var n = 0;
				$('#left').click(function(){
					n--;
					if(n<0){
						n = 3;
					}
					ck(n);
				})
				$('#right').click(function(){
					n++;
					if(n>3){
						n = 0;
					}
					ck(n);
				})
				function ck(n){
					$('img').attr('src',img[n]);
					$('#num').text((n+1)+'/4');
					$('#txt').text('美女'+(n+1));
					$('span').removeClass('active');//jQuery对象有隐式迭代 在做操作的时候不需要我们手动循环，jQuery会自动的偷偷地帮我们循环所有的元素，并逐一做操作
					// $('span')[n].className = 'active';
					$('span:nth-child('+(n+1)+')').addClass('active');
				}
			})
		</script>
	</head>
	<body>
		<div class="wrap">
			<p id="num">1/4</p>
			<ul>
				<li class="ac"><img src="images/1.jpg" ></li>
				<!-- <li><img src="images/2.jpg" ></li>
				<li><img src="images/3.jpg" ></li>
				<li><img src="images/4.jpg" ></li> -->
			</ul>
			<button type="button" id="left"><</button>
			<button type="button" id="right">></button>
			<div class="men">
				<span class="active"></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<p id="txt">美女1</p>
		</div>
	</body>
</html>

$(function(){
				var n = 0;
				$('#right').click(function(){
					// $('li').removeClass("ac");
					// $('span').removeClass("active");
					n++;
					if(n>=4){
						n=0;
					}
					ck(n);
					// $('li')[n].className= 'ac';
					// $('span')[n].className= 'active';
					// $('#num').html((n+1)+'/4');
					// $('#txt').text('美女'+(n+1));
				});
				$('#left').click(function(){
					// $('li').removeClass("ac");
					// $('span').removeClass("active");
					n--;
					if(n<=-1){
						n=3;
					}
					ck(n);
					// $('li')[n].className= 'ac';
					// $('span')[n].className= 'active';
					// $('#num').html((n+1)+'/4');
					// $('#txt').text('美女'+(n+1));
				});
				function ck(n){
					$('li').removeClass("ac");
					$('span').removeClass("active");
					$('li')[n].className= 'ac';
					$('span')[n].className= 'active';
					$('#num').html((n+1)+'/4');
					$('#txt').text('美女'+(n+1));
				}
			})