<h1 class="ex1">example1</h1> <script type="text/javascript"> $(document).ready(function(){ $('#slider1').bxSlider(); }); </script> <div id="slider1"> <div><img src="images/slide1.png" width="300px"></div> <div><img src="images/slide2.png" width="300px"></div> <div><img src="images/slide3.png" width="300px"></div> </div> <h1>example2</h1> <script type="text/javascript"> $(document).ready(function(
スライドショーの考え方 まず、最初に1枚目の画像を表示しておいて、1枚目を非表示にすると同時に2枚目を表示する。次に2枚目を非表示にすると同時に3枚目を表示する。3枚目を非表示にすると同時に1枚目を表示する。 今回は、制御構造を分かりやすくするために、フラグ用の変数を使い処理を分岐しています。具体的には変数flgの値が1の時は、1枚目の画像を表示する。flgの値が2の時は2枚目の画像を表示する。flgの値が3の時は3枚目を表示するといった具合です。 画像を切り替えた後に、flgを+1することで次の画像が表示できます。スライドショーに使う画像が3枚の場合は、flgの値が3を超えたときに1に戻します。あとは、これの繰り返しです。切り替えるタイミングの制御にはタイマーを使います。 【ステップ1】fadeIn()、fadeOut()を使用する fadeIn()、fadeOut()を使って画像を切り
Awkward Showcase is a plugin for the JavaScript Framework jQuery. We call it a Content Slider. But it can do more then just slide the content. For example you can add tooltips, enable thumbnails, activate dynamic height and lots more. Since version 1.0 it’s integrated with our Viewline Plugin enabling new innovative ways for displaying content on your website. Download on BitBucketView Demo
以前にここで「jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法」と題して、 jQueryでの画像切替ビューアーを紹介しましたが、 これを応用して、自動で画像エリアが切り替わる シンプルな画像スライドショーを作ってみたのでご紹介。 まずは動作のサンプルから。 ※全体構成は以前の記事の物と同じにしてあります。 jQuery SIMPLE SLIDESHOW【SAMPLE1】 4枚の画像が自動でクロスフェードしてスライドショーとして切り替わり、 下部に並べてあるサムネイルをクリックすることで 特定のビジュアルに切り替えることも出来ます。 全体構成についてHTMLから。 ◆HTML <div id="slideshow"> <div> <div><a href="#1"><img src="img/photo01.jpg" width="400" height="300" alt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く