likes
comments
collection
share

用JS原生实现轮播图（一）

作者站长头像
站长
· 阅读数 29

最近在面试的时候，项目中用的Vue,然后用到了一个轮播图的插件，面试官就问如果用原生JS怎么实现，因此笔者想总结一下，督促自己把基础打好。今天先写一个最基础版本的，后续再添加一些升级版。 今天的版本是有多少张图，就有多少个按钮，每点击一个按钮，就切换到对应的那张图。

效果如下：

用JS原生实现轮播图（一） 这里我觉得最关键的点在于旁边的小按钮，怎么让它每次样式变化后，让上一次的样式回到之前的状态。图片和文字可以自己自定义两个长度相等的数组就行。

我这里考虑两种思路。

（1）下一次点击之前，先把所有按钮的背景颜色全部还原，再为新点击的这一张添加背景颜色。代码如下：

 <style>
    body{background: #333}
    ul{margin: 0; padding: 0}
    li{list-style: none;}
    #pic{width: 440px; height: 440px; position: relative; margin: 0 auto}
    #pic img{width: 440px; height: 440px}
    #pic ul{width: 40px; position: absolute; top: 0; right: -50px}
    #pic li{width: 40px; height: 40px; margin-bottom: 4px;background: #666}
    #pic .active{background: #FC3}
    #pic p{margin: 0; width: 440px; height: 30px; line-height: 30px; text-align: center; color: #fff; position: absolute; left: 0; bottom: 0}
    #pic span{width: 440px; height: 30px; line-height: 30px; text-align: center; color: #fff; position: absolute; left: 0; top: 0}
  </style>
  
  <script>
    window.onload = function(){
      var arrUrl = ['./src/imgs/1.jpg.jpg','./src/imgs/2.jpg.jpg','./src/imgs/3.jpg.jpg','./src/imgs/4.jpg.jpg'];
      var arrText = ['图片1','图片2','图片3','图片4'];
      var oDiv = document.getElementById('pic');
      var oImg = oDiv.getElementsByTagName('img')[0];
      var oSpan = oDiv.getElementsByTagName('span')[0];
      var oP = oDiv.getElementsByTagName('p')[0];
      var oUl = oDiv.getElementsByTagName('ul')[0];
      var aLi = oUl.getElementsByTagName('li');
      var num = 0;
      for(var i = 0; i < arrUrl.length; i++){
        oUl.innerHTML += '<li></li>' 
      }
      oImg.src = arrUrl[num];
      oP.innerHTML = arrText[num];
      oSpan.innerHTML = (num+1) + '/' + arrUrl.length; 
      aLi[num].className = 'active';

      for(let i = 0; i < aLi.length; i++){
        aLi[i].onclick = function(){
          for(var j = 0; j < aLi.length; j++){
            aLi[j].className = '';
          }
          this.className = 'active';
          oImg.src = arrUrl[i];
          oSpan.innerHTML = (i+1) + '/' + arrUrl.length; 
          oP.innerHTML = arrText[i];
        }
      }
    }
  </script>
  
  <body>
  <div id="pic">
   <img src=""/>
   <span>图片正在加载中。。。</span>
   <p>文字说明正在加载中。。。</p>
   <ul>
   </ul>
  </div>
</body>

（2）先还原上一次点击按钮的背景颜色，再添加这一次点击的背景颜色，而不用全部还原。这里和上一种处理方式相比。只是JS部分稍有改动，我就只附这一部分的代码了，其他地方都是一样的。

  <script>
    window.onload = function(){
      var arrUrl = ['./src/imgs/1.jpg.jpg','./src/imgs/2.jpg.jpg','./src/imgs/3.jpg.jpg','./src/imgs/4.jpg.jpg'];
      var arrText = ['图片1','图片2','图片3','图片4'];
      var oDiv = document.getElementById('pic');
      var oImg = oDiv.getElementsByTagName('img')[0];
      var oSpan = oDiv.getElementsByTagName('span')[0];
      var oP = oDiv.getElementsByTagName('p')[0];
      var oUl = oDiv.getElementsByTagName('ul')[0];
      var aLi = oUl.getElementsByTagName('li');
      var num = 0;
      for(var i = 0; i < arrUrl.length; i++){
        oUl.innerHTML += '<li></li>' 
      }
      oImg.src = arrUrl[num];
      oP.innerHTML = arrText[num];
      oSpan.innerHTML = (num+1) + '/' + arrUrl.length; 
      aLi[num].className = 'active';
      var oLdLi = aLi[num];

      for(let i = 0; i < aLi.length; i++){
        aLi[i].onclick = function(){
          oLdLi.className = '';
          oLdLi = this;
          this.className = 'active';
          oImg.src = arrUrl[i];
          oSpan.innerHTML = (i+1) + '/' + arrUrl.length; 
          oP.innerHTML = arrText[i];
        }
      }
    }
  </script>
转载自:https://juejin.cn/post/6844904088451153927
评论
请登录