老师，没有实现任何效果

来源：1-13 作业题

qq_触掱钶忣倖福_0

2019-01-30 16:08:19

<!DOCTYPE html>
<html>
<head>
   <title>jquery作业</title>
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="css/jquery.css">
</head>
<body>
   <div class="main" id="main">
       
       <div class="banner">
           <a href="javascript:;"><div class="banner-slide slide1 slide-active"></div></a>
           <a href="javascript:;"><div class="banner-slide slide2"></div></a>
           <a href="javascript:;"><div class="banner-slide slide3"></div></a>
           <a href="javascript:;"><div class="banner-slide slide4"></div></a>
           <a href="javascript:;"><div class="banner-slide slide5"></div></a>
       </div>
       
       <a href="javascript:vido(0)" class="button prev"></a>
       <a href="javascript:vido(0)" class="button next"></a>
       
       <div class="dots">
           <span class="activ"></span>
           <span></span>
           <span></span>
           <span></span>
           <span></span>
       </div>
   </div>
   <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
   <script type="text/javascript" src="js/jquery.js"></script>
</body>
</html>

*{
   padding: 0;
   margin: 0 ;
}
body{
   font-family:Microsoft YaHei;
}
.main{
   width: 1000px;
   height: 400px;
   margin:0px auto;
   position: relative;
   overflow: hidden;
   border:6px solid #bbb;
}

.banner-slide{
   width: 1000px;
   height: 400px;
   background-repeat: no-repeat;
   background-size: 100% 100%;
   display: none;
}

.slide1{
   background-image: url("img/1.jpg");
}
.slide2{
   background-image: url("img/2.jpg");
}
.slide3{
   background-image: url("img/3.jpg");
}
.slide4{
   background-image: url("img/4.jpg");
}
.slide5{
   background-image: url("img/5.jpg");
}
.slide-active{
   display: block;
}

.button{
   position: absolute;
   width: 30px;
   height:60px;
   left:0px;
   top: 50%;
   margin-top: -40px;

}
.button:hover{
   background-color:#bbb;
   opacity: 2;
   filter: alpha(opacity=200);
}
.prev{
   background:url("img/pre2.png") no-repeat center;
}
.next{
   left: auto;
   right: 0px;
   background:url("img/pre.png") no-repeat center;
}

.dots{
   position: absolute;
   right: 10px;
   bottom:10px;
   text-align: right;
}
.dots span{
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   margin-left: 10px;
   background: rgba(7,17,27,0.4);
   box-shadow: 0 0 0 2px rgba(255,255,255,0.8);
   cursor:pointer;
}
.dots span.activ{
   box-shadow: 0 0 0 2px rgba(7,17,27,0.4);
   background: #fff;
}

$(function(){
       var index=0,
           timer=null,
           main=$('.main'),
           banners=$('.slide'),
           next=$('next'),
           prev=$('prev'),
           span=$('.dots span'),
           len=$('.banner.banner-slide').length;
           function slideimg(){
               //鼠标滑过时清除定时
               main.mouseover(function(){
                   clearInterval(timer)

               })

               //鼠标离开时定时继续
               main.mouseout(function(){
                   clearInterval(timer)
                   outFn();
               })

               function outFn(){
                   timer = setInterval(function(){
                       changeImg();
                   },2000)
               }
               outFn();

               //上一张
               prev.click=function(){
                   index--;
                   if(index<0){
                       index=len-1;
                   }
                   changeImg();
               }

               //下一张
               next.click=function(){
                   index++;
                   if(index>=len){
                       index=0
                   }
                   changeImg();
               }
               //实现圆点切换
               for(var b=0;b<len;b++){
                   //给sapn标签设置一个值为b的id
                   span[b].id=b;
                   //给圆绑击事件点
                   span[b].click=function(){
                       //改变index为当前span的值，与切换图片相对应
                       index=thid.id;
                   }
                   //调用图片切换的函数
                   changeImg();
               }

               //图片轮播的动作
               function changeImg(){
                   index++;
                   if(index>len-1){
                       index=0;
                   }
                   $('.banner.banner-slide').eq(index).addClass('slide-active').parent().siblings().children().removeClass('slide-active');
                   $('.dots span').eq(index).addClass('activ').parent().siblings().removeClass('active');
               }
           }

           slideimg();
       })