jq 无限点击轮播

<style type="text/css">
		*{margin: 0;padding: 0;}
		.fl{
			float: left;
		}
			
		.fr{
			float: right;
		}
		.cl:after{display:block;clear:both;content:"";visibility:hidden;height:0}
		.cl{zoom:1}
		
		.banner{
			width: 800px;
			height: 265px;
			margin: 40px auto;
			position: relative;
			overflow: hidden;
		}
		.banner ul li,.banner ol li{
			list-style: none;
		}
		.banner ul{
			width: 800px; 
			position: absolute;
		}
		.banner ul li img{
			width: 400px;
		}
		.banner ol{
			position: absolute; 
			top: 0;
			width: 40px;
			left: calc((100% - 40px)/2);
		}
		.banner ol li{
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background: #00DD1C;
			color: #fff;
			line-height: 40px;
			text-align: center;
			margin-bottom: 10px;
		}
		.banner ol li.active{
			background: #007FFF;
		}
		 .btns {
			margin-top: 10px auto;
			
		}
		 .btns b{
			width: 100px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			background: #039702;
			color: #fff;
			display: block;
			float: left;
			margin: 0 10px;
			cursor: pointer;
		}
		.btns b:hover{
			background: #00A03C;
		}
	</style>

　　

<div class="banner">
			<ul>
				<li class="cl">
					<img class="fl" src="images/img3.jpg" />
					<div class="txt fr">
						<h3>1</h3>
						<p>这是1</p>
					</div>
				</li>
				<li class="cl">
					<img class="fl" src="images/img4.jpg" />
					<div class="txt fr">
						<h3>2</h3>
						<p>这是2</p>
					</div>
				</li> 
				<li class="cl">
					<img class="fl" src="images/img2.jpg" />
					<div class="txt fr">
						<h3>3</h3>
						<p>这是3</p>
					</div>
				</li> 
				<li class="cl">
					<img class="fl" src="images/img1.jpg" />
					<div class="txt fr">
						<h3>4</h3>
						<p>这是4</p>
					</div>
				</li> 
				<li class="cl">
					<img class="fl" src="images/img1.jpg" />
					<div class="txt fr">
						<h3>5</h3>
						<p>这是4</p>
					</div>
				</li> 
			</ul>
			<ol>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ol>
		</div>
		
		<div class="btns cl">
			<b class="prev">上一个</b>
			<b class="next">下一个</b>
		</div>

　　

<script>
			$(function(){
				var Hg = $('.banner ul li').height();
				var lg = $('.banner ul li').length;
				$('.banner ul').height(Hg*lg);
				
				
				$('.banner ul li').each(function(index,i){
					$(this).attr('vl',index);
				})
				
				$('.banner ol li').click(function(){
					var index = $(this).index();
					con(index)
				})
				
				 $('.btns .next').click(function () {
					 var _index = $(".banner ul>li:first-child").attr('vl');
					$(".banner ul").stop().animate({top: -Hg},600, function () {
						$(".banner ul>li").eq(0).appendTo($(".banner ul"));
						$(".banner ul").css('top','0px');
					});
					console.log(_index);
					con(_index)
					
				})
				$('.btns .prev').click(function () {
					 $(".banner ul").css('top',-Hg);
					$(".banner ul>li").eq(lg - 1 ).prependTo($(".banner ul"));
					$(".banner ul").stop().animate({top:"0px"},600);
					
					var _index = $(".banner ul>li:first-child").attr('vl');
 
						 console.log(_index);
						 con(_index)
					})
					function con(index){
					$('.banner ol li').eq(index).addClass('active').siblings().removeClass('active');
					//$('.banner ol li').parent('ol').siblings('ul').animate({'top': - Hg * index},1000);
				}
			})
		</script>

　　prependTo,

　　appleTo