0

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

{       
    function nextImage() {

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

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

    }
}

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

4

3 回答 3

0

使用 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');
   });
}
于 2012-12-06T00:00:16.423 回答
0

我不认为这是一个愚蠢的问题，尽管无论出于何种原因，我自己的问题都被否决了，去想想吧！（结束吐槽）

您可能会考虑如果您能够使用 CSS，那么您可以尝试使用 CSS3 淡化过渡。

如果你用 Javascript 来做，我可能会使用 jQuery 来做，因为这些函数已经存在，你所要做的就是使用 .show('slow') 和 .hide('slow') 以及那个参数'slow ' 会自动为你做动画。

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

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

于 2012-12-06T00:00:57.943 回答
0

您应该使用 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 代码

于 2012-12-06T00:03:55.283 回答