大图轮播

Posted 2020-10-17 桃花灬仙人

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了大图轮播相关的知识，希望对你有一定的参考价值。

大图轮播

<title>无标题</title>
<style type="text/css">
*{margin:0 auto; padding:0;}
#wai{ width:700px; height:500px; overflow:hidden;}
.lun{ width:700px; height:500px;}
#left{ width:30px; height:30px; background-color:#09F; position:relative; top:-270px; left:-300px;}
#right{ width:30px; height:30px; background-color:#09F; position:relative; top:-300px; left:300px;}
</style>
</head>

<body>
     
     <div id="wai">
         <div class="lun">
            <img src="1_lie.jpg" id="a1" width="700" height="500" />
            </div>
        <div class="lun">
            <img src="../../timg.jpg" id="a2" width="700" height="500" />
            </div>
        <div class="lun">
            <img src="../../a6ee51037df28e181557839619ba6fe5.jpg" id="a3" width="700" height="500" />
            </div>
            <div id="left"></div>
            <div id="right"></div>
        
     </div>
     
      
</body>
</html>
<script type="text/javascript">
//找到图片的div
   var lun = document.getElementsByClassName("lun")
//当前显示的索引
   var index = 0;
   window.setInterval("huan()",2000);
   function huan()
   {
       if(index<=1)
       {
       index++;
       }else{
           index = 0;
           }
       xianshi(index);
       }
  //给我一个索引号，显示该索引图片
  function xianshi(index)
  {//让所有的隐藏
      for(var i=0;i<lun.length;i++)
      {
         lun[i].style.display = "none";
      }
      lun[index].style.display = "block";
  }
  //点击左换图
  var l = document.getElementById("left");
  l.onclick = function()
  {
      if(index>0)
      {
      index--;
      }else{
          index = lun.length-1;
          }
      xianshi(index);
      }
  //点击右换图
  var r = document.getElementById("right");
  r.onclick = function()
  {
      if(index<=1)
      {
       index++;
      }else
      {
          index = 0;
          }
      xianshi(index);
      }
</script>

效果图

以上是关于大图轮播的主要内容，如果未能解决你的问题，请参考以下文章

swiper轮播，小轮播图，点击变大轮播图（小图变大图）