Question

我有一个JavaScript函数，可以通过更改源来显示幻灯片中的图像。我试图创建smth以包含fadeIn效果，但我认为这是灾难性的......这是我的JavaScript函数。我不需要一个完整的答案，只需要一些帮助我实现这一目标的技巧。我是JavaScript的初学者，但我想学好它。如果有一种方法可以在没有jQuery的情况下做到这一点，那就太好了，或者直接在这个函数中包含jQuery将是最好的。

{       
    function nextImage() {

    if (currentImage < 5) {
        currentImage = currentImage + 1;
    } else {
        currentImage = 1;
    }

    document.getElementById('image').src = 'images/' + currentImage + '.jpg';

    }
}

当然，fadein会在相反的功能中适应淡出，但我认为这个例子可以帮助像我这样的新手。

Answer 1

使用jquery它会是这样的：

function nextImage() {

   if (currentImage < 5) {
       currentImage = currentImage + 1;
   } else {
       currentImage = 1;
   }
   $("#image").fadeOut('fast', function() {
       $("#image").attr('src','images/' + currentImage + '.jpg');
       $("#image").fadeIn('fast');
   });
}

Answer 2

我认为这不是一个愚蠢的问题，尽管无论出于什么原因，我自己的问题都会被投票，但要想一想！（结束咆哮）

你可能会考虑是否能够使用CSS，你可以尝试使用CSS3淡入淡出过渡。

如果你是用Javascript做的话我可能会用jQuery来做这个，因为那些功能已经存在，而你所要做的只是使用.show（'slow'）和.hide（'slow'）和那个参数'slow'会自动为你做动画。

http://api.jquery.com/show/

否则，如果你想从头开始编写，那么你可以查看jQuery源代码，看看实际的动画效果是如何完成的。

Answer 3

你应该使用JQuery，因为它们很容易实现效果：

http://api.jquery.com/category/effects/fading/

查看他们的示例和文档

以下是一个例子：

实施例：示例：动画隐藏的div逐个淡入淡出，在600毫秒内完成每个动画。

<!DOCTYPE html>
<html>
<head>
  <style>
    span { color:red; cursor:pointer; }
    div { margin:3px; width:80px; display:none;
      height:80px; float:left; }
      div#one { background:#f00; }
      div#two { background:#0f0; }
      div#three { background:#00f; }
    </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<script>
  $(document.body).click(function () {
    $("div:hidden:first").fadeIn("slow");
  });
</script>

有关如何开始使用JQuery的一些提示：

var a = $(document); //  <-- set the hole document to variable a
var b = $("#myid"); // <-- set the element that has id="myid" to variable b
var c = $(".myclass"); // <-- set the element(s) that has class="myclass" to variable c
var d = $("img"); // <-- set the img element(s) to variable d

使用Chrome Web Inspector或Firebug调试JavaScript代码

在我的JavaScript函数中添加淡化效果

3 个答案: