Question

我想添加淡入淡出效果，但我不知道如何......

HTML

 <body onLoad="simg()">
    <div id="slide">
        <img src="img1.jpg" id="img" >
    </div>
 </body>

JS

var nrimg = 1;
var total = 6;
var timp = window.setInterval(function simg() {   
   var image = document.getElementById('img');
   nrimg = nrimg + 1;

   if(nrimg > total){nrimg = 1;}
   if(nrimg < 1){nrimg = total;}    

   image.src = "img"+ nrimg +".jpg";
},2000);

和css

#slide {
    height:400px;
    width:650px;
    margin: 50px auto;
    position:relative;
    border-radius:4px;
    overflow:hidden;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

 #img {
    height:400px;
    width:650px;
    position:absolute;
 }

在哪里过渡？或类似的东西。提前谢谢。我不确定将transition: opacity 1s ease-in-out;

放在哪里

Answer 1

你有不透明度的转换，但你没有改变不透明度。为了使转换生效，您需要更改要查看效果的元素的不透明度。像这样：

#slide {
opacity: 0.2; //inactive slide
height:400px;
width:650px;
margin: 50px auto;
position:relative;
border-radius:4px;
overflow:hidden;
-webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#slide.active {
    opacity: 1;
}

 #img {
   height:400px;
    width:650px;
    position:absolute;
 }

所以你必须在我的例子中添加一些随机类（active），这将允许不透明度从0.2（非活动时）转换为1（活动时）

有关详细信息，请参阅此链接：https://www.w3schools.com/css/css3_transitions.asp

对正在变化的图像的褪色效果

1 个答案: