LINE2018.12.02サムネイルをクリックして画像を切り替えるタイプのレスポンシブに対応したスライダーです。$(this).attr('href'));});});簡単な説明HTMLとCSSでは特別なことはしていないので主にJavaScriptの部分で何をしているのかを説明します。#slideに高さを与えるまずはJavaScriptのこの部分。img').height());});ここで#slideに高さを与えています。absolute;はのちに説明)。そこでheight()を使ってdiv#slide内にあるimg要素の高さを取得し、さらにheight()を使って#slideに高さを与えています。img').height());これであとに続く要素がメイン画像の下に表示ようになります。これだけだとウィンドウサイズが変わったときに対応できません。そこで、ウィンドウサイズが変わったら同じ処理を行って#slideの高さを設定しなおします。img').height());});これでウィンドウサイズが変わっても画像の真下にサムネイルが表示されるようになります。次はJavaScriptのこの部分。$(this).attr('href'));});ここでは.click()と.each()をメソッドチェーンで繋いでいます。サムネイルをクリックしたときの処理は.click()のほうなのでそちらの説明です。alt="">');before()を使って現在表示されているimg要素の前にもうひとつのimg要素を挿入しています。挿入するimg要素のsrc属性は、クリックしたサムネイルのa要素のhref属性から取得して設定します。HTMLのa要素のhref属性は以下の例のように切り替えたい画像のsrcにしておきます。absolute;となっているので挿入されたimg要素はもともと表示されていたメイン画像の後ろに重なります。それでは次の処理です。function(){$(this).remove();});ここではふたつあるimg要素の手前側、つまりもともとあったメイン画像をfadeOut()を使ってフェードアウトさせ、最後にremove()を使ってimg要素を完全に削除しています。するともともとあったメイン画像が消え、後ろにある新しく挿入したimg要素がメイン画像として現れます。absolute;にしていたのはこのアニメーションのための設定だったのでした。false;と記述してa要素のリンクを無効にしています。これでサムネイルをクリックしたときのメイン画像の切り替えができます。メイン画像のプリロード最後に残った.each()の部分の解説。$(this).attr('href'));});ここでメイン画像のプリロードをしています。a要素をを1つずつ取り出してそのhref属性を取得、読み込む画像のsrcに設定しています。おわりにこのサンプルではメイン画像やサムネイルはただ並べてあるだけです。HTMLやCSSをいじればもっとそれらしいスライダーになると思うので、制作しているWebサイトに合わせて変更してみてください。LINEmiyakeiをフォローするmiyakeiおいしいソース関連記事Webデザイン表示時間のメーター付き、クリックでも自動でも切り替わるスライダークリックでも一定時間ごとに自動でも切り替わるスライダーです。どのくらいで切り替わるかもわかるようにメーターも設置しました。切り替えはやメーターの描画はJavaScript(jQuery)で行っています。...Webデザインクリックで横からスライドして現れるメニュースマホのサイトなんかにある、ハンバーガーメニューをクリックすると横からスライドして現れるメニューです。半透明になっている黒の背景をクリックするとメニューを閉じることができます。...Webデザインスクロールの途中からメニューを上に固定して表示スクロールしても画面からメニューが見えなくならないように上に固定する方法です。<heade...Webデザイン整列しているボックスをアニメーションで順番に表示CSSとjQuery(JavaScript)を利用したページ読み込み時に再生されるアニメーションです。CSSでtransitionとtransformを設定しておき、jQueryでtransformの値を変更することでアニメーションを実...Webデザイン訪問回数に応じてスタンプを押すアニメーション(jquery-cookie.jsを使用)ページにアクセスしたらその回数に応じてスタンプを押していくアニメーションです。jquery-cookie.jsを使ってクッキーのデータを取得し、ページに訪問した回数に応じてスタンプの表示やアニメーションを行っています。デモページ...Webデザイン整列しているリストをクリックで項目ごとに絞り込み表示flexboxで整列して並んでいるリスト全体からクリックした項目で絞り込み表示させる方法です。ボタンをクリックしたらjQueryを利用して表示非表示を処理しています。コメントをキャンセルメールアドレスが公開されることはありません。RSSWordPress.org。