jQueryを使ってNews Tickerプラグインを作ってみよう[前編][2]

前回までのおさらい。

前回の記事

まずは前回最後のサンプルを見てください。

ここまでのサンプル(フェードを実行)

サンプルを見ればわかるように
ニュースティッカーの実装まではできましたが不具合があるようです。

  • 最後のニュースが表示された後に何も表示されない

よくあるパターンは最後が表示されると最初に戻る というものです。
これを実装してみようと思います。

JSソースを書く 3

どうすればいいか考える

最後のニュースを表示したあとに 最初のニュースに戻るにはどうすればよいのか
とりあえず順を追って考えてみることにしましょう。
僕の全然プログラマではない思考でやってみます。

  1. count>=end なら count = 0 にしたのち li#news-(end) を非表示にして
  2. li#news-(count) を表示

count>=end になった後をどう判別するかが必要になりますので 新しく
var start = 0; を追記します。それもふまえて実装してみましょう。


var start = count = 0,
end = $("li","div#newsTicker ul").length-1,
interval = 1500,
fadeTimer = setInterval(function(){
  $("li#news-"+(start==1 ? end : count)).hide();
  $("li#news-"+(start==1 ? count++ : ++count)).fadeIn("slow");

  if(count>=end{
    count = 0;
    start = 1;
  }

},interval);

実行してみましたか?
ここまでのサンプル

最後のニュースから最初のニュースに戻るようにはなりましたが
そのあとがだめですね。

ちなみに


a ? b : c;

は a を判別してtrue を返せば b, falseなら c になります。


if(a){
  return b;
}else{
  return c;
}

と同じような意味になります。
たとえば上の例では


start==1 ? end : count

は start==1 なら end、それ以外なら(0なら)count


start==1 ? count++ : ++count

も同じように start==1 なら count++、それ以外なら ++count
がそれぞれ入ることになります。

結局どうしたらいいのか

順を追って解決していこうと思ってたんですけれど
次が結構ややこしくなってしまって…結論から言うと


$("li#news-"+(start==1 ? count==0 ? end : count-1 : count)).hide();
$("li#news-"+(start==1 ? (++count)-1 : ++count)).fadeIn("slow");
if(start==0 && count>=end){
  count = 0;
  start = 1;
}else if(start==1 && count>end){
  count = 0;
}

となります。
見た感じ非常にややこしくなってしまったので 順番に説明していきます。

  1. 1週目と2週目以降は count の動きが変わるので それを判別する 変数startを用意する。
  2. start == 0 なら1週目、start == 1 なら2週目以降
  3. start==1 ? は2週目以降かどうか
  4. count==0 ? は最後のニュースから最初のニュースにもどるときがどうか
  5. 1週目は 非表示:li#news-count、表示:li#news-(++count)
  6. 2週目以降は 非表示:li#news-(count==0 ? end : count-1)、表示:li#news-((++count)-1)
  7. つまり、li#news-endが表示される → count = 0 → 非表示にするのは li#news-end
  8. さらに li#news-endが非表示になる → li#news-(++count – 1)(ようはli#news-0) を表示
  9. この -1 のずれを戻すために 非表示にする方にも count-1 を
  10. 最初の週の終わりには count = 0; start = 1;にする。
  11. 次週以降の終わりには count = 0; にする。

start==1 ? count==0 ? end : count-1 : count

は start==1 && count==0 なら end、start==1 && count!=0 なら count-1
start!=1 なら count ということです。

説明すればするほど難解になっているような気もしますが…;;;
もっとキレイに説明したいんですけれど…
そんなことよりももっとスマートな書き方がきっとあるはずです。。。

というわけで、完成したスクリプトは以下になります。


$(function(){
  function newsFader(){
    if($("li","div#newsTicker ul").length==1) return false;

    $("li","div#newsTicker ul").each(function(i){
      $(this).attr("id","news-"+i);
      if(i!=0) $(this).hide();
    });

    var start = count = 0,
    end = $("li","div#newsTicker ul").length-1,
    interval = 1500,
    fadeTimer = setInterval(function(){
      $("li#news-"+(start==1 ? count==0 ? end : count-1 : count)).hide();
      $("#news-"+(start==1 ? (++count)-1 : ++count)).fadeIn("slow");
      if(start==0 && count>=end){
        count = 0;
        start = 1;
      }else if(start==1 && count>end){
        count = 0;
      }
    },interval);
  }
  newsFader();
});

&は半角に直してください。

では実行してみましょう。
サンプル(完成)

後半の流れが若干(結構)アヤシイ感じもしますけど
とりあえずはこれでニュースティッカーが完成しました。

次回は…

次回はこのファンクションを利用してjQueryのプラグインにしてみましょう。
たとえば interval、フェードの速度をオプションで設定できるようになります。

何か役に立つことがあったらシェアしてみてください

このエントリーをはてなブックマークに追加

Comments: 2 - Leave a comment

  1. はじめまして。javascriptの初心者です。
    この記事を見てニュースティッカー作ってみました!
    jQueryを使うことで変化がカッコよくなってていいですね。

    それで、fadeTimerのところなんですけど、自分で考えて

    var fadeTimer = setInterval(function(){
    $(“li#news-”+count).hide();
    if(count<=end-1){
    $("li#news-"+(++count)).fadeIn("slow");
    }else{
    count = 0;
    $("li#news-"+count).fadeIn("slow");
    }
    }, interval);

    のようにしてみました。
    一応動いたんですけど、どうでしょうか…?

    1. nori

      コメントの返信が遅くなってすみません。。
      この表示非表示部分に割とバグがあって、使ってると表示が重なったりします。。

      もう少しスマートにバグのないよう書き直したいです。

Cancel to reply

Leave a comment

Trackbacks: 1

Trackback URL for this entry
Listed below are links to weblogs that reference
jQueryを使ってNews Tickerプラグインを作ってみよう[前編][2] from 5509
  1. pingback from jQueryを使ってNews Tickerプラグインを作ってみよう[前編][1] | 5509

    [...] jQueryを使ってNews Tickerプラグインを作ってみよう[前編][2] [...]

Author

nori
nori
- UI Engineer
Location
- ,