canvas时钟效果

  

  .container{

   width: 500px;

   height: 400px;

   overflow: hidden;

   margin: 50px auto;

   position: relative;

  }

  .list{

   width: 2500px;

   height: 400px;

   position: absolute;

   left: 0px;

  }

  .list img{

   float: left;

   height: 400px;

   width: 500px;

  }

  .buttons{

   position: absolute;

   width: 75px;

   height: 20px;

   bottom: 10px;

   left: 50%;

   margin-left: -38px;

   z-index: 2;

  }

  .buttons span{

   width: 10px;

   height: 10px;

   margin-right: 5px;

   display: inline-block;

   border-radius: 5px;

   background-color: gray;

   opacity: 0.5;

   cursor: pointer;

  }

  .buttons .on{

   background-color: rgb(255,50,50);

   opacity: 0.8;

  }

  .arrow{

   position: absolute;

   background-color: gray;

   opacity: 0.5;

   height: 40px;

   width: 40px;

   color: #fff;

   text-decoration: none;

   line-height: 40px;

   font-size: 28px;

   font-weight: 800;

   text-align: center;

  }

  #prev{

   top:50%;

   left: 10px;

   margin-top:-20px;

  }

  #next{

   top:50%;

   right: 10px;

   margin-top:-20px;

  }

  <

  >

  window.onload = function(){

   var container = document.getElementById('container');

   var list = document.getElementById('list');

   var buttons = document.getElementById('buttons');

   var buttonsItem = buttons.getElementsByTagName('span');

   var prev = document.getElementById('prev');

   var next = document.getElementById('next');

   var index = 0;

   var startX = 0;

   var endX = 0;

   container.addEventListener('touchend',function(event){

    if(event.changedTouches.length==1&&this.getAttribute('disabled')!='disabled'){

     var touch = event.changedTouches[0];

     endX = touch.pageX;

     var offset = endX-startX;

     console.log(offset);

     if(Math.abs(offset)>=50){

      if(offset<0){// 右滑

       nextMethod();

      }else{

       prevMethod();

      }

     }

    }

   });

   container.addEventListener('touchmove',function(){

    event.preventDefault();

   })

   container.addEventListener('touchstart',function(event){

    if(event.targetTouches.length==1&&this.getAttribute('disabled')!='disabled'){

     vartouch=event.targetTouches[0];

     startX=touch.pageX;

    }

   })

   prev.addEventListener('click',function(){

    if (this.getAttribute('disabled')=='disabled') {

     return false;

    }

    prevMethod();

   });

   next.addEventListener('click',function(){

    if (this.getAttribute('disabled')=='disabled') {

     return false;

    }

    nextMethod();

   });

   for(vari=0;i

    buttonsItem[i].onclick=function(){

     if (this.getAttribute('disabled')=='disabled') {

      return false;

     }

     vari=this.getAttribute('index');

     varlength=Math.abs((i-index)*500);

     vardirection='right';

     if (length<0) {

      direction='left';

     }

     index= i;

     document.getElementsByClassName('on')[0].setAttribute('class','');

     buttonsItem[index].className='on';

     animate(direction,1,length);

    }

   }

   function prevMethod(){

    if(index==0){

     index=4;

     animate('right',40,2000);

    }else{

     index--;

     animate('left',1,500);

    }

    document.getElementsByClassName('on')[0].setAttribute('class','');

    // buttonsItem[index].setAttribute('class','on');

    buttonsItem[index].className='on';

   }

   function nextMethod(){

    if(index==4){

     index=0;

     animate('left',40,2000);

    }else{

     index++;

     animate('right',1,500);

    }

    document.getElementsByClassName('on')[0].setAttribute('class','');

    buttonsItem[index].className='on';

   }

   function animate(direction,speed,length){

    varend=length/speed;

    varcount=0;

    for(vari=0;i

      setTimeout(function(){

       count++;

       varleft=list.offsetLeft;

       if (direction=='right') {

        left-=speed;

       }else{

        left += speed;

       }

       list.style.left= left+'px';

       if(count

        disabledButtons();

       }else{

        resumeButtons();

       }

      },speed*i);

     }

   }

   function disabledButtons(){

    for(vari=0;i<5;i++){

     buttonsItem[i].setAttribute('disabled','disabled');

    }

    prev.setAttribute('disabled','disabled');

    next.setAttribute('disabled','disabled');

    container.setAttribute('disabled','disabled');

   }

   function resumeButtons(){

    for(vari=0;i<5;i++){

     buttonsItem[i].removeAttribute('disabled');

    }

    prev.removeAttribute('disabled');

    next.removeAttribute('disabled');

    container.removeAttribute('disabled');

   }

  }