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 をアニメーション化して 1 つずつフェードインし、各アニメーションを 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 に答える