職案人

求職・歴史・仏教などについて掲載するつもりだが、自分の思いつきが多いブログだよ。適当に付き合って下さい。

jQuery入門--変化するスティツキーヘッダー

2025年03月22日 | jQuery

変化するスティツキーヘッダー

【開発環境】
OS:Win11(64ビット)
VSCode1.72.2、
jqueryのCDN jquery-3.7.1.min.js及び、 modernizr.min.js

【スティツキーヘッダーの概要】
・デザイン

スティツキーヘッダーは上部に達すると

【仕組み】
今回は、スティツキーヘッダーが上部に達すると、初期状態のヘッダーの内容をコピーして、スティツキーヘッダーを新たに作る。
1.初期状態のヘッダーは動かさず、常に元の位置に配置する
2.ヘッダーのクローンを作成し、初期状態では画面上部の外側に配置しておく
3.ウインドウのスクロールによって初期状態のヘッダーが非表示になった時点で、クローンを見える位置に移動する

【フォルダーの構成】

imgフォルダー

【HTMLコード】

【head部】
1.Google Fonts の「Ropa Sans」フォントを取得している。 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ropa+Sans">

2.modernizr2.6.2のCDN

3.jQuery throttle / debounceのプラグインとは、イベント中の処理回数を減らすプラグイン。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>


【CSSフォルダー】-------------------------------------------------------------
1.normalize.cssはここでは省略
2.main.cssファイルにコードを書く

@charset "UTF-8";//フォント設定

/* Base */
html { "Ropa Sans", sans-serif; font-size: 16px; line-height: 1.5; }
body {
    background-color: rgb(223, 235, 241);
    color: rgb(0, 0, 0);
     min-width: 960px; //960px以下にはしない
    padding-top: 240px;
    }
h1, h2, h3, p, ul {
margin: 0;
}
ul {
padding-left: 0;
}
ul li {
}
a {
color: inherit;//継承したいプロパティの値
text-decoration: none;//テキストに線や色など
}
 
img {
/*選択した要素の中心を親要素の縦の位置の中心に合わせる*/
}

.clearfix:before, .clearfix:after {
content: " ";
}
.clearfix:after {
}
.dummy {
    margin: 0 auto;
    max-width: 32em;
    padding: 2em 0;

}
/*自分で書いたもの*/
.test {
    min-width: 960px;
    background-color:beige;
}

/*
 * Sticky header
 */

.page-header {
    background-color: rgb(255, 255, 255);
    width: 100%;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.no-boxshadow .page-header {
    border-bottom: 1px solid rgb(204, 204, 204);
}
.page-header > .inner {
    margin: auto;
    width: 960px;
}

/* Logo */
site-logo {
    font-size: 100%;
    margin-left: -20px;
}

/* Primary nav */
.primary-nav {
    float: right;
    line-height: 65px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.primary-nav li {
    float: left;
}
.primary-nav a {
    display: block;
    padding: 0 1.36em;
}
.primary-nav a:hover {
    background-color: rgb(240, 240, 240);
}

/* Sticky header (clone) */
.page-header-clone {
    background-color: rgb(0, 0, 0);
    opacity: 0.9;
    position: fixed;
    top: -35px;
    width: 100%;
    /*z-index: 30;*/
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
     /*何かの要素に影をつけたいとき*/
             box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    -webkit-transition: top 0.25s;
    /*スティッキヘッダーを別の物に変える時間*/
            transition: top 0.25s;
}
/*親要素の最初の子要素*/
.page-header-clone > .inner {
    margin: auto;
    width: 960px;
}
/*visibleはjsの中で使われる*/
.page-header-clone .visible {
    top: 0;
}
.page-header-clone:hover {
/*透過度には、0〜1の範囲で値を入れます*/
    opacity: 1;//不透明
}
/*一般的にウェブサイトのロゴ*/
site-logo .page-header-clone  {
    margin-left: 8px;
}
site-logo .page-header-clone  a {
    display: block;
    width: 143px;
    height: 32px;
    overflow: hidden;
}
site-logo .page-header-clone  a:before {
    content: url(../img/logo-small.png);
    display: inline-block;
}
.page-header-clone .primary-nav {
    font-size: 14px;
    line-height: 35px;
}
.page-header-clone .primary-nav a {
    color: rgb(128, 128, 128);
}

実際のコードでは、site-logoに、クラスを意味する「.」を付ける

【JSフォルダー】------------------------------------
main.jsファイルにコードを書く

$(function () {

    /*
     *スティッキーヘッド部
     */
    $('.page-header').each(function () {   //--------------繰り返し関数
 
  /*Jquery変数に代入する事で、Jqueryでも扱える用になる*/
       var $window = $(window), // Window オブジェクトをjQury化する
            $header = $(this),   // page-headerクラスをjQury化する

            // ヘッダーのクローン
/*
*contents()でheaderの子要素をすべて選択し、cloneメソッドで複製し、jQury変数に入れる。
*/

            $headerClone = $header.contents().clone(),

     // ヘッダーのクローンのコンテナー
 //page-header-cloneクラスを生成し、jQury変数に入れる。
      $headerCloneContainer = $('<div class="page-header-clone"></div>'),

     // HTML の上辺からヘッダーの底辺までの距離 = ヘッダーのトップ位置 +
    // ヘッダーの高さ
            threshold = $header.offset().top + $header.outerHeight();

        // コンテナーにヘッダーのクローンを挿入
        $headerCloneContainer.append($headerClone);

        // コンテナーを body の最後に挿入
        $headerCloneContainer.appendTo('body');

     // スクロール時に処理を実行するが、回数を 1 秒間あたり 15 までに制限
        $window.on('scroll', $.throttle(1000 / 15, function () {
            if ($window.scrollTop() > threshold) {
                $headerCloneContainer.addClass('visible');
            } else {
                $headerCloneContainer.removeClass('visible');
            }
        }));

        // スクロールイベントを発生させ、初期位置を決定
        $window.trigger('scroll');
    });

});
コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

jQuery入門--スティツキーヘッダー

2025年03月13日 | jQuery

スティッキーヘッドヘッダー

【開発環境】
OS:Win11(64ビット)
VSCode1.72.2、
jqueryのCDN jquery-3.7.1.min.js及び、 modernizr.min.js

【head部】での注意
・Google Fonts の「Ropa Sans」フォントを取得している。
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ropa+Sans">

【スティッキーヘッドのデザイン】

スクロールする。ヘッドが固定される

【概要】
スティッキーヘッドはスクロールに合わせて移動するヘッダーですが、画面上部に来ると、ヘッダーだけが固定し、本体はスクロールに合わせて移動する。

【処理の流れ】
スティッキーヘッドを実装するには、ウインドウのスクロール状態を監視した上、スクロール量に応じて、ヘッダーのスタイルを切り替える必要がある。具体的には以下のように処理する。
1.ヘッダーのデフォルトの位置を保存する
2.ウインドウのスクロール量を常に監視する
3.ウインドウのスクロール量がヘッダーのデフォルトの位置を超えた場合、ヘッダーはスティッキーを配置する
4.ウインドウのスクロールが画面上部まで戻ったら、ヘッダーをデフォルト位置に戻す

【フォルダーの構成】

【htmlファイルを書く】


【CSS/main.css】
@charset "UTF-8";

/* Base */
html {
     "Ropa Sans", sans-serif;
      font-size: 16px;
       line-height: 1.5;
    }
body {
     background-color :#f5deb3;
      color: rgb(0, 0, 0);
      min-width: 960px;
     padding-top: 240px;
    }
h1, h2, h3, p, ul {
     margin: 0;
    }
ul {
     padding-left: 0;
    }
ul li {
     list-style-type: none;
    }
a {
     color: inherit;
      text-decoration: none;
    }

img {
     vertical-align: middle;
    }
.hobun{
    background-color: rgb(240, 172, 223);
}
.dummy {
     margin: 0 auto;
     max-width: 32em;
     padding: 6em 0;

    }


/*
 * Sticky header
 */

/* デフォルトのスタイル */
.page-header {
    background-color: rgb(255, 255, 255);
/*要素をスティッキー化するとその要素分のスペースが空っぽに成るため*/
    position: absolute;/*は絶対配置*/
    width: 100%;
    min-width: 960px;/*最小幅*/
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);/*古いChrome用*/
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

/* スティッキー状態のスタイル */
/*ジャバスクリプトで制御される*/
.page-header.sticky {
    position: fixed; /*固定*/
    top: 0;
}
/*page-headeクラスの直下の子クラス*/

.page-header > .inner {
    margin: auto;
    width: 960px;
}

.no-boxshadow .page-header {
    border-bottom: 1px solid rgb(204, 204, 204);
}

/* ロゴ がある所にリンクする*/
/*ブログ規制のため*/
 
/* Primary nav */
.primary-nav {
    float: right;
    line-height: 65px;
    letter-spacing: 1px;
/*英字の大文字・小文字・全角文字を指定*/
    text-transform: uppercase;
}
.primary-nav li {
    float: left;
}
.primary-nav a {
  display: block;
    padding: 0 1.36em;
}
.primary-nav a:hover {
    background-color: rgb(240, 240, 240);
}

【js/main.js】--------------------------------------------------

$(function () {

    /*
     * Sticky header
     */
    $('.page-header').each(function () {
// jQuery オブジェクト化することで、onメソッドなどが使えるように成る
        var $window = $(window), //  jQuery オブジェクト化する
            $header = $(this),   //  jQuery オブジェクト化する
            // ヘッダーのデフォルト位置を取得
            headerOffsetTop = $header.offset().top;

        // ウィンドウのscrollイベントを監視
        // (ウィンドウがスクロールするごとに処理を実行する)
        $window.on('scroll', function () {
            // ウィンドウのスクロール量をチェックし、
            // ヘッダーのデフォルト位置を過ぎていればクラスを付与、
            // そうでなければ削除
            if ($window.scrollTop() > headerOffsetTop) {
                $header.addClass('sticky');//stickyクラスを追加する
            } else {
                $header.removeClass('sticky');//stickyクラスの削除
            }
        });

        // スクロールイベントをtrigger()で発生させる
        // (ヘッダーの初期位置を調整するため)
        $window.trigger('scroll');

    });
});



コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

jQuery入門--多機能なスライドショー

2025年03月06日 | jQuery

多機能なスライドショー

【開発環境】
OS:Win11(64ビット)
VSCode1.72.2、
jqueryのCDN jquery-3.7.1.min.js CDN及び 1.13.3/jquery-ui.min.js

【Modernizr2.8.3のCDN】

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

modernizr.jsとは、JavaScriptやCSSを書いていると「新しい機能が使えるブラウザではそれを使い、そうでない場合は別の手段で代替する」というように、処理を分岐させたい場合がある。Modernizr(モダナイザー)とは、そういった「機能検出」のためのJavaScriptライブラリだよ

【スライドショーの概要】

今回は、advanced版(上級)として、以下の昨日を持たせた。
1.ナビゲーション機能
矢印を表示させ、それによりスライドの「送り」、「戻り」を操作させる。

2.インジケータ機能
スライドの下部に、スライドの総数を示すドットを付け、更に現在のスライドが何番目なのか、表示させる。

3.オートプレイ機能
一定の時間が経過する度、自動でスライドをさせる。

4.ポーズ機能
マウスオーバーでスライドを停止させ、マウスオウトで再起動させる。

【フォルダー・ファイルの構築】

imgフォルダー

【index.html】

・ヘッダーの部分
1、normalize.cssを読み込み、デフォルトのスタイルを平均化をしている。
2,modernizr2.6.2のCDNを読み込み
3,jQuery-3.7.1.min.js 及びjQuery Ui のCDNを呼び込んでる

・div class="slideshow-slides"の所はスライダーに関する処理。
・div class="slideshow-nav"の所は、ナビゲーションに関する処理。
・div class="slideshow-indicator"の所は、インジケータに関する処理。
今回は、スライドするための画像を横一列に並べている点が、前回の積み上げて処理する方法と違う点である。

【CSS】
・「normalize.css」ファイルは省略
・「main.css」ファイルにコードを書く

@charset "UTF-8";/*文字コード設定*/

/*
 * Slideshow
 */
h2 {
    width: 100%;
    height: 80px;
    margin: 0 auto;
    text-align:center;
    line-height: 80px;
    background-color: rgb(191, 191, 245);
}
/*
*スライド
*/
.slideshow {
    background-color: rgb(0, 0, 0);
    height: 465px;
     /*最小幅*/
    min-width: 960px;
    /*はみ出た部分を隠す*/
    overflow: hidden;
 /*要素の配置:画面左上が基準*/
    position: relative;
}
/*
*ナビゲーション:画像をフィルムの様に横一列にする
*/
.slideshow-slides {
    height: 100%;
/*要素の配置:親要素を基準にする*/
    position: absolute;
    width: 100%;
    /* left は JavaScript で指定 */
}
.slideshow-slides .slide {
    height: 100%;
    overflow: hidden;
    position: absolute;
    width: 100%;
    /* left は JavaScript で指定 */
}
/*
*画像の設定;孫要素のimgの設定
*/
.slideshow-slides .slide img {
    left: 50%;
    margin-left: -800px;
    position: absolute;
}
/*
*矢印(ナビゲーション)の設定:子要素の並列設定
*/
.slideshow-nav a,
.slideshow-indicator a {
    background-color: rgba(0, 0, 0, 0); /* for IE9 */
    overflow: hidden;
}
/*擬似クラスの設定*/
.slideshow-nav a:before,
.slideshow-indicator a:before {
 /*ナビに使う画像を取り込む*/
    content: url(../img/sprites.png);
 /*横並びに表示させる*/
    display: inline-block;
    font-size: 0;
 /*行間の指定*/
    line-height: 0;
}

.slideshow-nav a {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
 /*上部との余白*/
    margin-top: -36px;
}
.slideshow-nav a.prev {
    margin-left: -480px;
}
.slideshow-nav a.prev:before {
    margin-top: -20px;
}
.slideshow-nav a.next {
    margin-left: 408px;
}
.slideshow-nav a.next:before {
    margin-left: -80px;
    margin-top: -20px;
}
/*
*表示されているスライドが先頭の場合は「Prev」ボタンを非表示にする。
*表示されているスライドが最後の場合は「Next」ボタンを非表示にする。
*JavaScriptで、.disabledを付けたり、外したりする
*/
.slideshow-nav a.disabled {
    display: none;/*非表示*/
}
 /*
*インジケータに関する設定
*/
.slideshow-indicator {
    bottom: 30px;
    height: 16px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}
.slideshow-indicator a {
    display: inline-block;
    width: 16px;
    height: 16px;
 
   /*左側の余白*/
    margin-left: 3px;
  /*右側の余白*/
    margin-right: 3px;
}
/*ドット表示は、.activeをJavaScriptで付ける事実現している*/
.slideshow-indicator a.active {
  cursor: default;//矢印
}
.slideshow-indicator a:before {
    margin-left: -110px;
}
.slideshow-indicator a.active:before {
    margin-left: -130px;
}

/*
*JavsScript 無効時→no-js
*/
.no-js .slideshow {
    height: auto;
}
.no-js .slideshow-slides {
    height: auto;
    position: static;
}
.no-js .slideshow-slides .slide {
    display: block;
    height: auto;
    position: static;
}
.no-js .slideshow-slides .slide img {
    margin: auto;
    position: static;
}
.no-js .slideshow-nav,
.no-js .slideshow-indicator {
    display: none;
}

【JS】
main.jsファイルにコードを書く
$(function () {

    /*
     * Slideshow
     */
 //eachメソッドは繰り返し関数---------------------------①
    $('.slideshow').each(function () {

    // 変数の準備
    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

        var $container = $(this),                                 // a
            $slideGroup = $container.find('.slideshow-slides'),   // b
            $slides = $slideGroup.find('.slide'),                 // c
            $nav = $container.find('.slideshow-nav'),             // d
            $indicator = $container.find('.slideshow-indicator'), // e
            // スライドショー内の各要素の jQuery オブジェクト
            // a スライドショー全体のコンテナー
            // b 全スライドのまとまり (スライドグループ)
            // c 各スライド
            // d ナビゲーション (Prev/Next)
            // e インジケーター (ドット)

            slideCount = $slides.length, // スライドの点数
            indicatorHTML = '',          // インジケーターのコンテンツ
            currentIndex = 0,            // 現在のスライドのインデックス
            duration = 500,            // 次のスライドへのアニメーションの所要時間
            easing = 'easeInOutExpo',    // 次のスライドへのアニメーションのイ                                                               ージングの種類
            interval = 7500,             // 自動で次のスライドに移るまでの時間
            timer;                       // タイマーの入れ物


    // HTML 要素の配置、生成、挿入
    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

        // 各スライドの位置を決定し、
        // 対応するインジケーターのアンカーを生成
//each()メソッドの引数関数に変数iを使うことで、iをカウンタとして
//使ってる。それにより、スライドのleftの値と、インジケーターの
//コンテンツを指定している
 
        $slides.each(function (i) {
            $(this).css({ left: 100 * i + '%' });
            indicatorHTML +='<a href="#">'+ (i + 1) +'</a>’;
        });

        // インジケーターにコンテンツを挿入
/*
*「html()」は、任意のHTML要素を取得したり意図的に要素を
*追加・書き換をするする時に使うメソッド。
*/
        $indicator.html(indicatorHTML);


    // 独自関数の定義
    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

        // 任意のスライドを表示する関数
        function goToSlide (index) {
            // スライドグループをターゲットの位置に合わせて移動
            $slideGroup.animate({ left: - 100 * index + '%' }, duration, easing);
            // 現在のスライドのインデックスを上書き
            currentIndex = index;
            // ナビゲーションとインジケーターの状態を更新
   //自作関数updateNav()を呼び出す
            updateNav();
        }

  // スライドの状態に応じてナビゲーションとインジケーターを更新する関数
        function updateNav () {
            var $navPrev = $nav.find('.prev'), // Prev (戻る) リンク
                $navNext = $nav.find('.next'); // Next (進む) リンク

            // もし最初のスライドなら Prev ナビゲーションを無効に
            if (currentIndex === 0) {
                $navPrev.addClass('disabled');//要素に属性を追加する
            } else {
                $navPrev.removeClass('disabled');//要素に属性を削除
            }

            // もし最後のスライドなら Next ナビゲーションを無効に
            if (currentIndex === slideCount - 1) {
                $navNext.addClass('disabled');//要素に属性を追加する
            } else {
                $navNext.removeClass('disabled');//要素に属性を削除
            }

            // 現在のスライドのインジケーターを無効に------
//すべてのスライドのa要素を削除し、現在のスライドのa要素には付加する
            $indicator.find('a').removeClass('active') //.slideshow-slidesのa要素
                .eq(currentIndex).addClass('active');
        }

        // タイマーを開始する関数---------------------------
        function startTimer () {
            // 変数 interval で設定した時間が経過するごとに処理を実行
            timer = setInterval(function () {
         // 現在のスライドのインデックスに応じて次に表示するスライドの決定
                // もし最後のスライドなら最初のスライドへ
   //インデクス+1/スライド総数の余りを変数に入れる
                var nextIndex = (currentIndex + 1) % slideCount;
                goToSlide(nextIndex);
            }, interval);
        }

        // タイマーを停止る関数
        function stopTimer () {
            clearInterval(timer);
        }


    // インベントの登録
    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

  // ナビゲーションのリンクがクリックされたら該当するスライドを表示
//.onメソッドに無名関数のイベントハンドラを使っている。
        $nav.on('click', 'a', function (event) {
//イベントのデフォルト動作をキャンセルする
           event.preventDefault();
       if ($(this).hasClass('prev')) { //prev属性の有無を調べる
                goToSlide(currentIndex - 1);
            } else {
                goToSlide(currentIndex + 1);
            }
        });

        // インジケーターのリンクがクリックされたら該当するスライドを表示
        $indicator.on('click', 'a', function (event) {
  //イベントのデフォルト動作をキャンセルする
            event.preventDefault();
  //クラス属性の有無を調べる
            if (!$(this).hasClass('active')) {
                goToSlide($(this).index());
            }
        });

        // マウスが乗ったらタイマーを停止、はずれたら開始
        $container.on({
            mouseenter: stopTimer,
            mouseleave: startTimer
        });


    // スライドショーの開始
    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

        // 最初のスライドを表示
        goToSlide(currentIndex);

        // タイマーをスタート
        startTimer();

    });//----------------------------------------------------②

});


コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

jQuery入門--滑らかな動きをするスライドショー

2025年02月24日 | jQuery

滑らかな動きをするスライドショー

【開発環境】
OS:Win11(64ビット)
VSCode1.72.2、
jqueryのCDN
jquery-3.7.1.min.js CDN及び 1.13.3/jquery-ui.min.js

【normalize.cssとは】
どのブラウザーでアクセスしても、表示が変わってしまわないように、各々のブラウザーに適用されているデフォルトのスタイルを平均化するために読み込ませるCSSです。

◆normalize.cssの使い方
まずは、Normalize.cssのページから、ダウンロードし、head内にlinkでnormalize.cssへのファイルパスrelで記載すれば完了。

【Modernizrとは】
Modernizr(モダナイザ)は、Web開発においてHTML5やCSS3の機能がブラウザでサポートされているかを判定するJavaScriptライブラリです。

◆ModernizrのCDNを見つけるには、CDNプロバイダーで「Modernizr」を検索すると、最新のCDNリンクが見つかります。
① jsDelivr
jsDelivrmodernizr を検索すると、最新バージョンのCDNが見つかります。

【スライドショー】

【概要】
一定時間ごとに、画面が切り替わるだけ!
【スライドショーの流れ】
1.すべてのスライドを一箇所に重ねて配置し、一旦非表示にする。
2.最初のスライダーのみをフェードインで表示する。
3.一定の時間が経過したら、現在表示しているスライドをフェードアウトで非表示にし、次のスライドをフェードインで表示する。
4.以降は一定時間ごとに「減災のスライドをフェードアウト」と「次のスライドをフェードイン」を繰り返す。
5.最後のスライドが表示されたら先頭のスライドに戻り、4の処理を繰り返す。
6、ユーザーがそのページから離れるまでスライドショーは繰り返される。

【フォルダの構成】

◆index.htmlファイル


・CSSフォルダについて
1.main.cssファイル

/*
 * Slideshow
 */
 p {
     width: 100%;
     height: 50px;
     font-size: 30px;
     line-height: 50px;
     margin: 0 auto;
     text-align:center;
     background-color: antiquewhite;
 }
.slideshow {
    overflow: hidden;
    position: relative;
    min-width: 960px;
    height: 465px;
}
.slideshow img {
    display: none;/*非表示*/
    position: absolute;/*絶対位置*/
    left: 50%;
    margin-left: -800px;
}

/* JavsScript が無効時に実行される */
.no-js .slideshow img:first-child {
    display: inline;/*横並び*/
}
【normalize.cssファイル】
/*! normalize.css v2.1.2 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */

audio,
canvas,
video {
    display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
   
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9.
 */

img {
    border: 0;
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari 5.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */

button,
input,
select,
textarea {
    /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    appearance:button;
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
    appearance: textfield;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}
◆JSフォルダー
main.jsファイルのコード
$(function () {

    /*
     * Slideshow
     */
    // slideshow クラスを持った要素に対して無限に繰り返される
    $('.slideshow').each(function () { //-------------------------①

  //jQuery の 変数宣言
        var $slides = $(this).find('img'), // すべてのスライドを収納する
            slideCount = $slides.length,   // スライドの点数(4枚)
            currentIndex = 0;              // 現在のスライドを示すインデックス

        // 1 番目のスライドをフェードインで表示
  //指定されたインデックス番号の画像をフェードインする
        $slides.eq(currentIndex).fadeIn(); 

        // 7500 ミリ秒ごとに showNextSlide 関数を実行
        setInterval(showNextSlide, 7500);

        // 次のスライドを表示する関数の定義
        function showNextSlide () {

            // 次に表示するスライドのインデックス
            // (もし最後のスライドなら最初に戻る)
            var nextIndex = (currentIndex + 1) % slideCount;

            // 現在のスライドをフェードアウト
            $slides.eq(currentIndex).fadeOut();

            // 次のスライドをフェードイン
            $slides.eq(nextIndex).fadeIn();

            // 現在のスライドのインデックスを更新
            currentIndex = nextIndex;
        }
    });     -------------------------------------------------------②
});
①~②まで処理は、jQueryがセレクタ「.slideshow」に対して、処理が無限に繰り返される。
 



コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする

jQuery入門--スライドショー

2025年02月19日 | jQuery

jQueryプラグインでスライドを作る

【開発環境】
OS:Win11(64ビット)
VSCode1.72.2、
クロム
jquery-3.7.1.min.js CDN及び 1.13.3/jquery-ui.min.js
参照サイト:slickでスライダー実装

【スライダーのデザイン】

jQueryプラグイン「slick」を使ってスライダーを作ってみる
・スライダーは3枚の写真を自動でスクロールする事

【slickを選ぶ】
https://kenwheeler.github.io/slick/のHPを開く

これをスクロールして、自分の作りたいタイプのものを選ぶ。
また、詳細を知りたい場合は「usage」をクリックすると、ジャンプ出来る。

手順1
HTMLのマークアップ(構造)を確認する

head部へ、2つのcssを読み込む


body部へ、slick.jsを読み込む

slickコードの見本

最後は、HTMLの見本コード

ただし、実際のプログラムは実際の環境に合わせないと、動かない
【 jsDelivr CDN!】

【コードを実装する】
・フォルダー

・index.htmlファイル


・style.cssファイル

@charset "utf-8";

/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, article,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, article {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
/* End Reset CSS */

html {
    color: #54514c;
    font-size: 10px;
}
body {
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
header {
    z-index: 100;
    position: fixed;
    width: 100%;
    height: 60px;
    background-color: #8fc3f3;
}
.center {
    display: block;
    margin: 30px  auto;
    text-align: center;
    font-size: 20px;

}


#key_visual {
    width: 100%;
    max-width: 1500px;
    padding-top: 60px;
    margin: 0 auto;
}
#key_visual img {
    width: 100%;
    vertical-align: bottom;
}

footer {
    text-align: center;
}

footer p {
    text-align: center;
}
footer p small {
    font-size: 18px;
    line-height: 3em;
}
/*メディアクエリ*/
@media (min-width: 768px) {
    html {
        font-size: 12px;
    }
    header {
        height: 80px;
    }
    header h1 {
        top: 24px;
        left: 25px;
    }
    header .logo img {
        width: 250px;
    }
    header nav {
        display: inline-block;
        position: absolute;
        top: 22px;
        right: 0;
        width: auto;
        height: auto;
        margin-right: 15px;
        font-size: 1.4rem;
        opacity: 1;
    }
    header nav ul {
        position: relative;
        top: 0;
        left: 0;
        transform: unset;
    }
    header nav ul li {
        display: inline-block;
        height: 35px;
        border-radius: 2px;
        line-height: 35px;
    }
    header nav ul li a {
        display: block;
        padding: 0 15px;
        color: #9c9b98;
        font-size: unset;
        text-decoration: none;
        transition: color .3s;
    }
    header nav ul li:hover {
        background-color: #b99566;
    }
    header nav ul li:hover a {
        color: #fff;
    }
    #drawer_toggle {
        display: none;
    }
    #key_visual {
        padding-top: 80px;
        margin-bottom: 30px;
    }
    main {
        padding-bottom: 50px;
    }
    main h2 {
        padding-left: 20px;
    }
    #information {
        margin-bottom: 50px;
    }
    #information ul {
        font-size: 1.2rem;
    }
    #information ul li time {
        display: inline-block;
        padding-right: 10px;
    }
    #information ul li p {
        display: inline-block;
        line-height: 1;
    }
    #information ul li p::before {
        margin-right: 10px;
        vertical-align: middle;
    }
    #gourmet .container {
        justify-content: space-between;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
    }
    #gourmet article {
        width: calc(50% - 5px);
        padding: 0;
    }
    footer ul li {
        display: inline-block;
        width: 120px;
        margin: 0 10px;
    }
    footer ul li a {
        color: #fff;
    }
    footer .logo {
        margin: 20px 0 5px;
    }
    footer .logo img {
        width: 200px;
    }
}

@media (min-width: 1000px) {
    main {
        width: 1000px;
        margin: 0 auto;
    }
    #gourmet .container {
        padding: 10px 0;
    }
    #gourmet article {
        width: calc(50% - 5px);
    }
}
/*スライダー設定*/
.slider {
    visibility: hidden;
}
.slider.slick-initialized {
    visibility: visible;
}

.slick-prev, .slick-next {
    z-index: 1;
}
.slick-prev {
    left: 10px;
}
.slick-next {
    right: 10px;
}
・main.js
$(function(){
    // $('.your-class').slick({
    //  setting-name: setting-value
    // });
    $(".slider").slick({
        arrows: false,
        dots: true,
        autoplay: true
    });
});

 

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする