一定時間でローテーションする広告

Home>Information>一定時間でローテーションする広告

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

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

[JavaScript][jQuery]

右から左にスルスルっとスクロールしながら入れ替わっていく広告です。

サンプル

ソースコード

HTML

前回「一定時間で変わる広告」の応用編です。
今回は、CSSの部分で、書き込む処理が増えています。便宜的にHTML上にstyle属性を設定して、その中でスタイルシートを書いていますが、実際には外部スタイルシートに書いて読み込ませた方がスマートです。

position:absolute;

表示する広告の位置をスタイルシートを使って移動させるので、位置を絶対配置にします。

overflow:hidden、white-space:nowrap;

この2つは、overflow:hidden;が、「枠からはみ出す量のテキストや画像があった場合、はみ出した部分を表示しない」という意味で、white-space:nowrap;が、「テキストを折り返して表示しない」という意味です。この指定をしないと、表示できないテキストが下の方に伸びて最初から全部表示されてしまいます。

また、cm1は最初から表示するので幅を300(width:300px;)にしています。

JavaScript

「jQueryの読み込み、ページ読み込み時の実行、ループ処理、条件分岐」については「マウスクリックでテキストを入れ替える」をご覧ください。
「一定時間経過したら処理を行う」については、「一定時間で変わる広告」をご覧ください。

スクロールして広告枠を徐々に消去する

$( "#cm" + i ) .animate ( { ~ } );

cm1~3の要素に対して「~」で記述するエフェクト処理を行います。

width: "-=300px"

現在表示されているcmの幅を300px減らします。もともとの幅を300pxに指定してあるので、要するに幅をゼロにするということです。

complete: function(){ ~ };

先に記述した処理が終わったら「~」の処理を行う、という意味です。
ここでは、width:"-=300px"が先に記述した処理なので、幅がゼロになったら次の処理を行う、ということになります。

$( "#cm" + i ).hide();

現在表示しているcmの存在を消します。cmの存在自体を消さないと、見た目に見えなくなっているようでも、存在していることには変わりないので、次のcmを表示することができなくなります。

次の広告を徐々に表示する

$( "#cm" + j ) .css( "left", "300px") .css( "width", "1px") .show()

次の広告の表示位置を左から300px、幅を1pxに設定して、cmを適用した要素を存在させます。このように、jQueryでは、一つの処理の後に、次の処理を続けて記述することができます。

.animate({ width: "+=300px", left: "-=300px" }, "slow" );

幅を300px足し、同時に表示位置を左に300pxずらします。最後のslowは、ゆっくりとエフェクトを見せる、という意味です。

関連リンク

よく読まれている記事

UpDate:2009-11-9