50行代码手写原生js轮播图 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div style="width:200px;height:100px;border:1px dashed #ccc;">
    <img style="width:200px;height:100px;">
    <div class="btn"></div>
    <button onclick="nextClick('0')">上一步</button><button onclick="nextClick('1')">下一步</button>
  </div>
</body>
</html>
<script>
  var src = 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3390010055,2124910244&fm=26&gp=0.jpg';
  var timer = null;
  var tiemrout = null;
  var btnIndexList = [0,1,2];
  var template = '';
  var nowNum = 0;
  for(var i = 0;len = btnIndexList.length,i<len;i++){
    template += '<button onclick='+"handleClick("+i+",0)>"+i+'</button>'
  };
  document.querySelector('.btn').innerHTML = template;
  var setSrc = function(val){
    document.querySelector('img').setAttribute('src',src);
    var btnList = document.querySelector('.btn').children;
    for(var j = 0;len = btnList.length,j<len;j++){
      btnList[j].setAttribute('style','background:#999');
      btnList[val].setAttribute('style','background:red');
    }
  };
  var handleClick = function(val,isAuto){
      src = ["https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3390010055,2124910244&fm=26&gp=0.jpg","https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3371480176,379804256&fm=26&gp=0.jpg","https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1756487459,1115749781&fm=26&gp=0.jpg"][val];
      setSrc(val);
      if(isAuto === 0){
        clearInterval(timer);
        clearTimeout(tiemrout);
        tiemrout = setTimeout(function(){
          rotation(nowNum,1);
        },2000);
      };
  };
  var rotation = function(num,isAuto){
    if(isAuto === 1){
      timer = setInterval(function(){
        num+=1;
        num = num>2? 0 : num;
        num = num===-1? 2 :num;
        nowNum = num;
        handleClick(num,isAuto);
      },1000);
    };
  };
  var nextClick = function(val){
    if(val === '0') nowNum -= 1;
    if(val === '1') nowNum += 1;
    nowNum = nowNum>2? 0 : nowNum;
    nowNum = nowNum===-1? 2 :nowNum;
    handleClick(nowNum,0);
  };
  setSrc(0);
  rotation(0,1);
</script>

 效果图：

 

posted @ 2020-12-03 15:27  早起开拓者  阅读(82)  评论(0)    收藏  举报