带有淡入淡出动画的自动照片滑块-仅限javascript

我做了一个5图像滑块，可以在几秒钟内循环自动更改图像。 我想淡出和在动画之前和之后改变每个图像。 这是我的代码：

HTML:

JS:

我不能只更改javascript的html代码。我更喜欢只使用javascript。

---

有什么建议吗？

因此，这里有一个简单的JavaScript实现。您需要阅读jQuery，特别是动画，如果您想定制它的话

以下是工作jsBin：

从本质上讲，这其中唯一重要的方面是：

  bigImage.animate({opacity: .1 }, function() { 

      $(this).attr('src', imageArray[imageIndex]) 

  });

所以这里发生的事情是，你被选中了Img，并对它的不透明度设置动画。一旦不透明度达到.1，回调函数将采用相同的元素并重新放置img.src。这会呈现出图像淡入淡出的外观

要查看的参考资料：

在运行此操作之前，必须包含指向jQuery源文件的链接

/*HTML代码*/
/* HTML Code */
<div id="slideshow">
   <div>
     <img src="image1.jpg">
   </div>
   <div>
     <img src="image2.jpg">
   </div>
   <div>
     Pretty cool eh? This slide is proof the content can be anything.
   </div>
</div>

/* CSS code */
#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

/* Js Code */
$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

很酷吧？这张幻灯片证明了内容可以是任何内容。
/*CSS代码*/
#幻灯片放映{
保证金：50px自动；
位置：相对位置；
宽度：240px；
高度：240px；
填充：10px；
盒影：0.20px rgba（0,0,0,0.4）；
}
#幻灯片>div{
位置：绝对位置；
顶部：10px；
左：10px；
右：10px；
底部：10px；
}
/*Js代码*/
$（“#幻灯片>div:gt（0）”）.hide（）；
setInterval（函数（）{
$（“#幻灯片>分区：第一个”）
.衰减（1000）
.next（）
法丹先生（1000）
(完)
.appendTo（“#幻灯片”）；
},  3000);

设置不透明度动画可能是获得此效果的最简单方法。查看本文了解本机JS/CSS动画@非常感谢，但是我发现很难理解我是如何在代码中使用它的。你能帮忙吗？你愿意使用jQuery吗？@bencripps我是，但我不知道如何使用jQuery，我不知道如何将jQuery和Javascript结合起来。你能详细说明一下为什么你会给出答案吗。它与OP的解决方案有何区别或改进。这也是一个教学时刻。

/* HTML Code */
<div id="slideshow">
   <div>
     <img src="image1.jpg">
   </div>
   <div>
     <img src="image2.jpg">
   </div>
   <div>
     Pretty cool eh? This slide is proof the content can be anything.
   </div>
</div>

/* CSS code */
#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

/* Js Code */
$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);