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

最新推荐文章于 2023-02-16 17:38:05 发布

Arfae

最新推荐文章于 2023-02-16 17:38:05 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/Arfae/article/details/53458240

版权

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

学习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>

Arfae

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简单的点击实现图片轮播~

第一次写博客，从十点开始说要来写，换了个头像，现在才开始码字。学习web前端时间并不多，还没毕业的自学小白，想要用博客来记录自己的学习史。有问题的任意吐槽，我会改~ -------------------------------快乐的分割线---------------------------------------
复制链接

扫一扫