8.4

作者: 小豪豪豪豪豪豪 | 来源:发表于2018-08-20 09:59 被阅读0次

8.4
8.4
8.4
8.4
8.4
8.4
8.4
8.4
8.4
8.4

轮播

<style>

  *{
      margin:0;
      padding:0;
  }
  li{
      list-style:none;
  }
  a{
      text-decoration: none;
  }
  
  .box{
      width:640px;
      height:426px;
      margin:100px auto;
      position: relative;
  }
  .pic_num>li{
      position: absolute;
      display: none;
  }
  .pic_num>li:first-child{
      display: block;
  }

/* 圆点*/
.num{
overflow: hidden;
position: absolute;
top:380px;
left:270px;
}
.num>li{
float:left;
width:15px;
height:15px;
border-radius: 50%;
background: #eee;
margin-left:5px;
}
.num>li:first-child{
background: #f00;
}

  button{
      width:30px;
      height:60px;
      position: absolute;
  }
  .prev{
      top:183px;
      
  }
  .next{
      top:183px;
      right:0;
  }

</style>
</head>
<body>
<script>
//自己动起来
//1.找到图片
//2.找到圆点
var picLi=document.querySelectorAll('.pic_num>li');
var numLi=document.querySelectorAll('.num>li');
var timer;
var i=0;

  function play(){
    timer=setInterval(function(){
          picLi[i].style.display='none';
          numLi[i].style.background='#eee';
          i++;
          if(i>4){
              i=0;
          }
          picLi[i].style.display='block';
          numLi[i].style.background='#f00';
        
      },1000)
  }

play();

  //给box添加鼠标移入移出事件
  var box=document.querySelector('.box');
  box.onmouseover=function(){
      clearInterval(timer);
  }
 box.onmouseout=function(){
      play();
  }

  //点击按钮
 var prev=document.querySelector('.prev');
 var next=document.querySelector('.next');
  
 next.onclick=function(){
    picLi[i].style.display='none';
    numLi[i].style.background='#eee';
     i++;
     if(i>4){
         i=0;
     }
     picLi[i].style.display='block';
     numLi[i].style.background='#f00';
 
 }
  
 prev.onclick=function(){
     picLi[i].style.display='none';
    numLi[i].style.background='#eee';
     i--;
     if(i<0){
         i=4;
     }
     picLi[i].style.display='block';
     numLi[i].style.background='#f00';
 }

//点击圆点切换
for(var j=0;j<numLi.length;j++){
numLi[j].index=j;
numLi[j].onclick=function(){
var num=this.index;
for(var a=0;a<numLi.length;a++){
picLi[a].style.display='none';
numLi[a].style.background='#eee';
}
picLi[num].style.display='block';
numLi[num].style.background="#f00";
}
}
</script>