jQueryで画像などを自動でスライドするサムネイル付きコンテンツスライダーをシンプルに作成する方法｜BLACKFLAG
先日、とある案件で必要になり、jQueryを使って作成した、 コンテンツ要素を自動でスライドさせるサムネイル要素付きのスライダーが 今後も他でいろいろ使いまわせそうだったので、ここでも軽くスクリプトを紹介してみます。 まずは動作のサンプルから。 指定した間隔（時間）で一つずつ画像（コンテンツ要素）がスライドします。 スライド箇所の下にサムネイルを配置し、マウスオーバーすることで 該当箇所へ任意にスライドさせることができます。 サムネイル部分にマウスオーバーしている間は、 メイン部分の自動スライドの動作は停止します。 この動作の全体構成について、 HTMLから。 ◆HTML <div id="slider_main"> <ul> <li><img src="img/photo01.jpg" width="400" height="300" alt="" /></li> <li><img sr
jQueryでサムネイル付きスライドショーをシンプルに作成する方法｜BLACKFLAG
以前にここで「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
jQueryでリストなどの高さが違う複数の要素のheight値を揃える方法｜BLACKFLAG
＜li＞リストや連続したブロック要素を並べる際に、 中に入る要素の内容によって、個々の高さがまちまちになってしまった場合、 高さが揃わないことで、レイアウトを整えるのが意外と面倒になったりします。 そんな際に使える、jQueryを使っての、 連続した要素の高さを（最大値に）揃える方法を紹介してみます。 サンプルはfloatで横に並べた＜li＞リスト要素の高さを揃えるやり方。 まずはHTMLから。 ◆HTML <ul> <li><p>これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。</p></li> <li><p>これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキス
jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法｜BLACKFLAG
Webサイト上でバナーや商品のサムネイル画像などの見せ方として、並べられた画像（コンテンツ要素）を一定のスピードで自動でスライドして、無限ループさせているものをたまに見かけます。 そんなビューアー的役割のコンテンツ無限ループスライダーを作ってみたので紹介してみます。 まずは動作のサンプルから。 jQuery LOOPSLIDER【SAMPLE】 10個並べてある画像が自動でスライドし、無限にループしています。 この動作の全体構成について、HTMLから。 ◆HTML <div id="loopslider"> <ul> <li><a href="#"><img src="img/photo01.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo02.jpg" width="1
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
