轮播

作者: 任仪凡 | 来源:发表于2018-08-04 19:09 被阅读0次

无标题文章
项目-轮播图
轮播图
jQuery传统轮播、三位置轮播、呼吸轮播
轮播图的实现
个人博客—轮播器
fusion轮播
day7_作业
轮播
[iOS]定制性强的广告轮播图--SCAdView

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