实现图片淡入淡出效果

最新推荐文章于 2023-02-24 19:37:26 发布

二八哥

最新推荐文章于 2023-02-24 19:37:26 发布

阅读量1.5k

点赞数 1

本文链接：https://blog.csdn.net/weixin_42103706/article/details/84137472

版权

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    #slider{
      width:200px; height:150px;
      position:relative;
      border:1px solid #555;
    }
    #slider>img{
      position:absolute; top:0; left:0;
      opacity:0;
      transition:all .5s linear;
    }
    #slider>img.show{  opacity:1; z-index:10 }
  </style>
</head>
<body>
<div id="slider">
  <img src="images/1.jpg" class="show" alt="万紫千红"/>
  <img src="images/2.jpg" alt="大漠戈壁"/>
  <img src="images/3.jpg" alt="花团紧凑"/>
  <img src="images/4.jpg" alt="海洋生物"/>
</div>
<script>
  function task(){
    //查找现在class为show的img
    var img=slider.getElementsByClassName("show")[0];
    //清空img的class
    img.className="";
    //如果img有下一个兄弟
    if(img.nextElementSibling){
      //设置img的下一个兄弟class为show
      img.nextElementSibling.className="show";
    }else{
      //否则,设置img的父元素的第一个孩子className为show
      img.parentNode.children[0].className="show";
    }
  }
  var timer=setInterval(task,3000);
  //当鼠标进入停止
  slider.onmouseover=function(){
    clearInterval(timer);
  }
  slider.onmouseout=function(){
    timer=setInterval(task,3000);
  }

  var imgs=slider.children;
  for (var img of imgs){
    img.onclick=function(){
      var imgs=this;
      alert(imgs.alt);
    }
  }
</script>
</body>
</html>

二八哥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现图片淡入淡出效果

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; #slider{ width:200px; height:150px;
复制链接

扫一扫