2


フラッシュニュースのタイトルを作成したいです。
しかし、どこに問題があるのか​​わかりません！:(（ウェブデザインの初心者
のため：D）
そう...

1つのタイトルを表示（fadeIn）し、遅延して（fadeOut）を非表示にするタイトルの一部を作成します...
その後、次のタイトルを表示します...（停止せずにループで）！

plzは私がそれを作成する方法を学ぶのを助けます...：Dこれらは私が書いた私のコードです：

<div id="flashNews">
    <div class="news">This is news title 1</div>
    <div class="news">This is news title 2</div>
    <div class="news">This is news title 3</div>
    <div class="news">This is news title 4</div>
    <div class="news">This is news title 5</div>
    <div class="news">This is news title 6</div>
    <div class="news">This is news title 7</div>
</div>

<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.news').each(function(index) {
            $(this).fadeIn('slow').delay(700).fadeOut('slow');
        });

    });
</script>
4

3 に答える 3

5

あなたはこれを試すことができます。

これはそれほどプロのコードではありませんが、機能するはずです。

jsFiddleソリューションは次のとおりです。

http://jsfiddle.net/migontech/sfUU6/

var news = $('.news')
current = 0;
news.hide();
Rotator();
function Rotator() {
    $(news[current]).fadeIn('slow').delay(500).fadeOut('slow');
    $(news[current]).queue(function() {
        current = current < news.length - 1 ? current + 1 : 0;
        Rotator();
        $(this).dequeue();
    });
}

編集

これは変数の宣言です。重要なことは、ご覧のとおり、最初にjQueryを選択し、それを変数に割り当てたことです。その理由は、コードのすべての行でこのセレクターを使用し、$（'。news'）。dosomthing（）を呼び出してから$（'。news'）。dosomethingelse（）を呼び出すと、jQueryが検索するためです。呼び出すたびに、それらの要素のDOM。今、それは一度それをするつもりです。また、クラスセレクターを使用しているため、これは非常に遅いセレクターであり、毎回実行する必要はなく、パフォーマンスを向上させることができます。あなたはおそらくそれに気付かないでしょうが、それでも。:)

var news = $('.news')
current = 0;

次に、すべての要素を非表示にして、最初の回転を開始します。

news.hide();
Rotator();

そして今、あなたはおそらくRotator（）関数についてもっと質問がある部分です。ここでは、元のfadeInコードとfadeOutコードを保持していることがわかりますが、これを関数に入れて、現在選択されている要素にのみ適用しました。私が追加したのはjQuery.queue（）で、これはキューを追加し、上記のすべての効果が実行されるまで待機し、その後コード内で実行されます。

そこで、index（'current'変数）を増やすか、選択した要素の長さよりも大きい場合は0に戻し、現在のインデックスに対してRotator（）を再度呼び出します。また、最後に.dequeue（）を実行して、キューを削除して続行できることを通知することを忘れないでください。

function Rotator() {
    $(news[current]).fadeIn('slow').delay(500).fadeOut('slow');
    $(news[current]).queue(function() {
        current = current < news.length - 1 ? current + 1 : 0;
        Rotator();
        $(this).dequeue();
    });
}
于 2013-03-25T07:20:13.897 に答える
1

各liに同じ遅延を設定しています。

試す

$('.news').each(function(index,i)
{
    $(this).delay(index * 1001).fadeIn('slow').fadeOut('slow');
});

デモ

于 2013-03-25T06:48:53.583 に答える
0

以下のコードはニュースをローテーションします... 

<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    var divIndex=0;
    function ShowHideDivs(){
      maxval=parseInt($("#maxval").html());
      $("#news"+divIndex).fadeIn('slow').delay(700).fadeOut('slow');
      divIndex=(divIndex+1) % maxval;
    }
    window.setTimeout("ShowHideDivs()",10);
    </script>

    <div id="flashNews">
        <div id="news1" class="news">This is news title 1</div>
        <div id="news2" class="news">This is news title 2</div>
        <div id="news3" class="news">This is news title 3</div>
        <div id="news4" class="news">This is news title 4</div>
        <div id="news5" class="news">This is news title 5</div>
        <div id="news6" class="news">This is news title 6</div>
        <div id="news7" class="news">This is news title 7</div>
        <div style="display:none" id="maxval">7</div>
    </div>
于 2013-03-25T06:56:34.467 に答える