最最最简单轮播图

苍岚王

于 2022-08-20 16:01:04 发布

阅读量240

点赞数 1

文章标签： servlet java html

本文链接：https://blog.csdn.net/q2432315767/article/details/126440880

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>超级无敌大猛一</title>
   </head>
   <body>

       <div class="w">

           <img src="./img/1.jpg" alt="" srcset="" >
           <img src="./img/2.jpg" alt="" srcset="" style="display: none;">
           <img src="./img/3.jpg" alt="" srcset="" style="display: none;">

           <div class="btn">
               <div class="left">

               </div>
               <div class="right"></div>
           </div>

       </div>


       <script>
           var img=document.getElementsByTagName("img")
           var left=document.getElementsByClassName("left")[0]
           var right=document.getElementsByClassName("right")[0]
           var index=0
           left.οnclick=function(){
               if(index>0){
                   index--
                   console.log(index);
                   // console.log(index);
                   for(var i=0;i<img.length;i++){
                       img[i].style.display="none"
                       img[index].style.display="block"
                   }
                   }else if(index=img.length-1){
                   index=0

               }
           }
           right.οnclick=function(){
               // console.log("right");
               if(index<img.length-1){
                   index++
                   console.log(index);
                   for(var i=0;i<img.length;i++){
                           img[i].style.display="none"
                       img[index].style.display="block"
                   }
                       }else if(index=img.length-1){
                   index=img.length-1
                   }
               }
               </script>




       <style>
           .left{
               float: left;
           }
           .right{
               float: right;
           }
           .w{
               margin: 200px auto;
               background-color: aqua;
               position: relative;
               width: 400px;
               height: 400px;
               border:1px solid red ;
           }
           .w img{
               width: 400px;
               height: 400px;

           }

           .w .btn{
               position: absolute;
               top: 200px;
               margin-top: -50px;
               width: 400px;
               height: 100px;

               text-align: center;
               line-height: 100px;
           }
           .w .btn div{
               width: 100px;
               height: 100px;
               background-color: aqua;
           }
               .w .btn div:hover{
           cursor: pointer;
           background-color: red;
           }
       </style>


   </body>
</html>