jQuery方法来写轮播图

今天使用jQuery来写轮播图
css：

*{
	margin: 0;
	padding: 0;
}
#lb{
	width: 500px;
	position: relative;
	height: 273px;
	overflow: hidden;
}
img{
	width: 500px;
	height: 273px;
}
 ul{
	list-style: none;
}
ul li{
	cursor: pointer;
	float: left;
}
#zm{
	width: 500px;
	height: 30px;
	position: absolute;
	top: 244px;
	z-index: 60;
	display: none;
	background-color: #675D96;
	opacity: 0.7;
}
#zm ul li{
	width: 20px;
	text-align: center;
	height: 20px;
	border: 1px solid red;
}
#zm ul{
	display: inline-block;
}
/* 下方数字的样式 */
.active{
	background-color: yellow;
}

html：

<!-- 图片 -->
		<div id="lb">
			<ul>
				<li><img src="img/ias_153671908531315_570x273_90.jpg"/></li>
				<li><img src="img/ias_153794585385923_570x273_90.jpg"/></li>
				<li><img src="img/ias_154321465262112_320x153_90.jpg"/></li>
				<li><img src="img/ias_154381820377356_570x273_90.jpg"/></li>
				<li><img src="img/ias_155123704749334_570x273_90.jpg"/></li>
			</ul>
		</div>
		<!-- 提示第几张 -->
		<div id="zm">
				<span id="ts">
					这是图片1
				</span>
				<ul>
					<li class="active">1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
			</div>

jq：

// 定义一个下标
var index=0;
//获取轮播元素
var $li = $("#lb ul li");
//获取下面数字
var li = $("#zm ul li");
//获取提示的标签
var span = document.getElementById('ts');
         //定时轮播
         function auto(){
             //把定时器放进timer这个对象里面
             timer = setInterval(function(){
                 index++;
                 if(index > $li.length){
                     index = 0;
                 }
                 play();
             },2000);
         }
         auto();
         li.click(function(){
         	index = $(this).index();
             play();
         })
          function play(){
          	 span.innerHTML=`这是图片${index+1}`;
             //获取li的下标，改变样式
             li.eq(index).addClass("active").siblings().removeClass("active");
             //获取图片的下标，实现淡入淡出
             $li.eq(index).fadeIn().siblings().fadeOut();
         }

         //当我移上d_main的时候停止轮播
         $("#zm").hover(function(){
             clearInterval(timer);
             $("#zm").show()
         },function(){
             //移开重新调用播放
             auto();
             $("#zm").hide()
         });
         $("#lb").hover(function(){
             $("#zm").show()
         },function(){
             //移开重新调用播放
             $("#zm").hide()
         });