简单的点击实现图片轮播~

红太狼 2022-07-14 09:08 289阅读 0赞

第一次写博客，从十点开始说要来写，换了个头像，现在才开始码字。

`学习web前端时间并不多，还没毕业的自学小白，想要用博客来记录自己的学习史。`

`有问题的任意吐槽~`

` -------------------------------快乐的分割线---------------------------------------`

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .container{
                width: 685px;
                height: 425px;
                margin: 30px auto;
            }
           .imgs{
               position: absolute;
           }
            #img2{
                display: none;
            }
            .btn{
                position: relative;
            }
        </style>
    </head>
    <body>
    <div class="container">
       <img src="banner1.jpg" id="img1" class="imgs " >
        <img src="banner2.jpg" id="img2" class="imgs">
        <button type="button" class="btn" οnclick="btnClick()">点我一下</button>
    </div>
    <script>
         //纯js实现图片轮播
         function hide(div,time){  //先定义两个参数，轮播的图片和轮播需要的时间
             var divStrFir=div.substr(0,1);  //获取div的第一个字符串
               if(divStrFir == "#") {   //如果为ID选择器时
                   var imgName = document.getElementById(div.substr(1));
               }else if(divStrFir == "."){   //类选择器
                   var imgName=document.getElementsByClassName(div.substr(1))[0];
               }else{  //标签选择器
                   var imgName=document.getElementsByTagName(div)[0];
               }
             var imgStyle=document.defaultView.getComputedStyle(imgName,null);//获取图片的样式
           var timer= setInterval(function (){
               imgName.style.opacity=imgStyle.opacity-0.1; //图片透明度递减
                if(imgName.style.opacity ==0.1){
                    imgName.style.display="none";
                    clearInterval(timer);
                }
            },time/10);
         }
         function show(div,time){
             var divStrFir=div.substr(0,1);
             if(divStrFir == "#") {
                 var imgName = document.getElementById(div.substr(1));
             }else if(divStrFir == "."){
                 var imgName=document.getElementsByClassName(div.substr(1))[0];
             }else{
                 var imgName=document.getElementsByTagName(div)[0];
             }
             imgName.style.display="block";
             imgName.style.opacity=0;
             var timer=setInterval(function(){
                 imgName.style.opacity=parseFloat(imgName.style.opacity)+0.1;//图片透明度递增
                 if(imgName.style.opacity ==1){
                     clearInterval(timer);
                 }
             },time/10);
    
         }
         function hideDiv(obj){
             setTimeout(function(){
                 hide(obj,700);
             },1000);
        }
         function showDiv(obj){
             setTimeout(function(){
                 show(obj,700);
             },800);
         }
         function btnClick(){
             hideDiv("#img1");
             showDiv("#img2");
         }
    
    </script>
    </body>
    </html>