0

わかりました、私は主にコンテンツといくつかのフロント エンドのデザインを扱いますが、私たちのウェブサイトに iFrame への素敵な画像スライダーをまとめようとしていました。jQueryを使用して構築できましたが、小さな問題があります。フェードインとフェードアウトがあるはずですが、最初の回転ではフェードアウトのみを使用します。次の回転は完全に機能します。

これが私が使用しているコードです

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>



<script type="text/javascript">
$(document).ready(function(){
  slideShow();
});

function slideShow() {

  var showing = $('#ContentContain2 .isshowing');
  var next = showing.next().length ? showing.next() : showing.parent().children(':first');

  showing.fadeOut(800, function() { next.fadeIn(1600).addClass('isshowing'); }).removeClass('isshowing');

  setTimeout(slideShow, 5000);
}

</script>

問題を確認できるように、ホストされているリンクを次に示します。

http://ksee.bimedia.net/sites/community/index.html

4

2 に答える 2

0

最初にそれらをすべて非表示にしてみてください (フェードインする前に)。それが原因だと思います。これは、最初のサイクルでフェードアウトした後にフェードインする理由を説明します（ただし、前ではありません）。完全な不透明度から「フェードイン」することはできません。

$(document).ready(function(){
  $("#ContentContain2").children("img").not(".isshowing").hide(); // hide em
  slideShow();
});

function slideShow() {

  var showing = $('#ContentContain2 .isshowing');
  var next = showing.next().length ? showing.next() : showing.parent().children(':first');

  showing.fadeOut(800, function() { next.fadeIn(1600).addClass('isshowing'); }).removeClass('isshowing');

  setTimeout(slideShow, 5000);
}
于 2013-05-09T16:10:16.313 に答える
0

以下をcssファイルに追加します（または、個々の要素にスタイルを適用します）：

#ContentContain2 img
{
display: none;
}

#ContentContain2 img.isshowing
{
display: inline;
}

これは Set Sail がコードで行うように提案したことを効果的に行います。つまり、fadeIn が呼び出されるまで要素を非表示にします。

また、実際に最初に表示されるのは img2 だということはご存知ですか？img1 を最初に表示する場合は、isshowingクラスを img4 に移動して、スクリプトが最初に img1 をフェードインするようにします。

編集: デモ用の JSFiddle は次のとおりです: http://jsfiddle.net/Efbt3/

于 2013-05-09T16:32:54.973 に答える