Question

我想滑动或淡化图像。

如何在更改src属性并为图像使用数组时执行此操作？

您可以在此处观看滑块： http://www.chri126g.wigf1.sde.dk/Javascript/imageslider1/

Answer 1

虽然您的问题仅标记为JavaScript，但您可以在这种情况下使用jQuery：

$("img")
  .fadeOut(500, function() {
    $("img").attr('src', imageURL);
  })
  .fadeIn(500);

另一种方法和简单的方法是将图像用作背景，并在更改背景时使用CSS过渡效果：

.your_elem{
  -webkit-transition: ease-in-out 300ms;
  -moz-transition: ease-in-out 300ms;
  -o-transition: ease-in-out 300ms;
  transition: ease-in-out 300ms;
}

Answer 2

你可以复制img标签（一个图像在顶部，第二个图像在中间 - 此时不可见）并在加载下一个img时切换图像不透明度。在结果中你有2个img标签并且它不是非常清晰，但它会运行良好：）

JavaScript - 如何为.src更改添加淡入淡出效果

2 个答案: