美文网首页
2018-08-16

2018-08-16

作者: YTF1214 | 来源:发表于2018-08-16 19:41 被阅读0次

    <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>

    相关文章

      网友评论

          本文标题:2018-08-16

          本文链接:https://www.haomeiwen.com/subject/wdoobftx.html