请问老师这是什么问题

来源：1-13 作业题

hy_wang

2018-04-02 16:34:34

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>1-13</title>
    <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
    <div class="banner">
     <!--    顶部文字区 -->
        <div class="banner-top">jQuery实现轮播图</div>
     <!--    中央图片区 -->
        <div class="banner-contain">
            <a href="https://www.imooc.com/u/5491924/plans">
                <div class="contain one"></div>
            </a>
            <a href="https://www.imooc.com/u/5491924/plans">
                <div class="contain two"></div>
            </a>
            <a href="https://www.imooc.com/u/5491924/plans">
                <div class="contain three"></div>
            </a>
            <a href="https://www.imooc.com/u/5491924/plans">
                <div class="contain four"></div>
            </a>
            <a href="https://www.imooc.com/u/5491924/plans">
                <div class="contain five"></div>
            </a>
            <div class="left"></div>
            <div class="right"></div>
            <div class="litter">
                <span class="litter-checked"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript" src="1-13.js"></script>
</body>
</html>

*{
	padding:0;
	margin: 0;
}
.banner{
	background-color: #fff;
	width: 1200px;
	height: 560px;
	margin: 0 auto;
}
/*顶部文字样式*/
.banner-top{
	height: 100px;
	text-align: center;
	line-height: 100px;
	font-weight: bold;
	font-size: 28px;
	font-family: '宋体';
}
/*中间banner样式*/
.banner-contain{
	width: 1200px;
	height: 460px;
	box-sizing: border-box;
	border:10px solid #ddd;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
}
.contain{
	width: 1180px;
	height: 440px;
	float: left;
	}
.one{
	background:url('1.jpg') no-repeat;
}
.two{
	background:url('2.jpg') no-repeat;
	
}
.three{
	background:url('3.jpg') no-repeat;
	
}
.four{
	background:url('4.jpg') no-repeat;
	
}
.five{
	background:url('5.jpg') no-repeat;
	
}

/*左右按钮*/
.left{
   width: 25px;
   height: 50px;
   background-color: transparent;
   background-image: url('pre2.png');
   background-size:100% 100%;
   position: absolute;
   top:50%;
   left: 20px;
   margin-top:-25px;
}
.right{
   width: 25px;
   height: 50px;
   background-color: transparent;
   background-image: url('pre.png');
   background-size:100% 100%;
   position: absolute;
   top:50%;
   right: 20px;
   margin-top:-25px;
}
/*小圆点部分*/
.litter{
	position: absolute;
	right: 8px;
	bottom: 8px;
	width: 200px;
	text-align: right;
}
.litter>span{
	display: inline-block;
	width: 15px;
	height: 15px;
	box-sizing: border-box;
	border-radius: 50%;
	/*border:1px solid #fff;*/
	background: rgba(7,17,27,0.4);
	box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
}
.litter>.litter-checked{
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
}

// 测试函数
$(function(){
  	var contain=$('.contain');
  	var len=contain.len;
  	var left=$('.left');
  	var right=$('.right');
  	var radius=$('.litter > span');
  	var index=0;
  	// 左边按钮点击事件
 left.click(function(){
 	index--;
 	if(index<=-1){
 		index=len-1;
 	}
 	showImg();
 })
    // 右边按钮点击事件
 right.click(function(){
 	index++;
 	if(index >=len){
 		index=0;
 	}
 	showImg();
 })
 // 小圆点绑定事件
   radius.each(function(){
   	  radius.eq(index).click(function(ind){
   	  index=ind;
   	  showImg();
   	  })
   	})
   // 自动轮播  
   var timer=setInterval(function(){
   	 left.click();
   },2000)
   contain.mouseenter(function(){
   	clearInterval(timer);
   })
   contain.mouseleave(function(){
   	 timer=setInterval(function(){
   	 left.click();
   },2000)
   })
   // 切换图片
   function showImg(){
     contain.css('display','none');
     radius.removeClass('litter-checked');
     contain.eq(index).css('display','block');
     radius.eq(index).addClass('litter-checked');

   }

请问老师为什么不能正常运行

写回答

2回答