BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. jQueryで作るサムネイルが縦にならんだスライダー
by 稲垣 稲垣

jQueryで作るサムネイルが縦にならんだスライダー

jQueryで作るサムネイルが縦にならんだスライダー

こんにちは、稲垣です。

明けましておめでとうございます。今年の目標は北海道ツーリングをすることです。本年もどうぞよろしくお願いいたします。

さて、今回はサムネイルが縦にならんだスライダーを作成してみました。

スライダーばかり投稿している気がしますが、求めている仕様と微妙に違って実装に戸惑うこともあるので、まあたくさんあっても困ることはないかな?といった次第ですはい(´・ω・`)

目次

デモ

htmlとcssを用意する

動きの実装

おまけ

終わり

デモ

数秒ごとに自動で切り替わっていき、サムネイルをクリックした時は対応した画像へ切り替わります。

そしてまたそこから自動で切り替わっていくなんの変哲もないスライダーです。

htmlとcssを用意する

htmlとcssになります。

メイン画像とサムネイル画像はそれぞれ用意します。

html

css

動きの実装

まずはスライドの速度や間隔などの初期値を設定して、各画像のリストタグへidを振ります。

上記で設定したcountを基準に画像を表示させていきます。

img150114_1

一定時間毎にcountを増やし、photoFade()を実行する記述をします。

あとはサムネイル押下時の処理になります。

上から何番目のサムネイルを押したか調べ、その番号をcountへ代入します。

以上で縦サムネイルのスライダーが完成しました!

おまけ

縦サムネイルということで作成しましたが、CSSを調整するだけでサムネイルの位置は変更してもらって大丈夫です。

img150114_2

img150114_3

終わり

最後に今回のコードをまとめて載せます。

以上、いかがでしたでしょうか?

メイン画像は<li>ごと入れ替わっているので画像にリンクをつけても大丈夫です!

サムネイルの位置を変えるだけで雰囲気も変わると思うので、設置するサイトに合わせて色々変えてみてください。

ページの先頭に戻る