BOOKS
by Sukeharu Kano / 狩野祐東 著書

作りながら学ぶjQueryデザインの教科書

トップページ 書籍 Q&A 作りながら学ぶjQueryデザインの教科書:Q&A 作りながら学ぶjQueryデザインの教科書

  • このトピックには1件の返信が含まれ、2人の参加者がいます。
2件の投稿を表示中 - 1 - 2件目 (全2件中)
  • 投稿者
    投稿
  • #2309 Reply

    笠井

    作りながら学ぶjQueryデザインの教科書
    はじめまして
    笠井といいます。
    作りながら学ぶjQueryデザインの教科書を購入しました。初めてのjQueryでいまいち分からず勉強しています。
    そこで、始めに実習前にダウンロードと書いていたので先にダウンロードしました。
    すごいものが作れるのだと 関心しながらサンプルを見ていましたが、
    第6章のカルーセルを作成をサンプルで見たのですが 矢印と反対に動いているのはこれで正解なのでしょうか?
    サンプルの
    https://book.studio947.net-jquery/after/c06-05-a/
    も反対ですがこれでいいのでしょうか?
    素人なのですいません。

    #2314 Reply

    狩野 祐東
    キーマスター

    笠井さんこんにちは。

    カルーセルに限りませんが、一般的に、右向き矢印(>や→)は「次へ」を意味します。このサンプルの場合は「(いま見えていない)次の画像へ」という意味になるので、サンプルどおりの動作で正しいと言えます。左向き矢印(<や←)も同様で「前の画像へ」ということになります。が、矢印の向きとは反対に動くので、なんだか混乱しますよね。

    考え方の参考になるように、同じような動きの別の例を挙げておきます。WindowsやMacのウィンドウにあるスクロールバーは、実際にスクロールしたいものとは反対方向に動いています。たとえばこのページの下の方を見たいと思ってスクロールしたとき、スクロールバーはたしかに下に動きますが、ページ自体は上の方に移動します。カルーセルの動きも実はそれと同じなのです。

    ちなみにこのサンプルのスクロールの方向は、jQueryプログラムを少し変えるだけで試せます。「06-05-a」フォルダの「scripts」フォルダ内の「myplugin.js」を開いて、次の部分を書き換えてみてください。スクロールの方向を変えてみて、どう感じるか試してみるのもよいでしょう。

    $.fn.extend({
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ...
    .on('click', 'a.prev', function(event){
    	event.preventDefault();
    	doCarousel($(this), -1); //もともと1だったところを-1に書き換える
    })
    .on('click', 'a.next', function(event){
    	event.preventDefault();
    	doCarousel($(this), 1); //もともと-1だったところを1に書き換える
    });
    ...
2件の投稿を表示中 - 1 - 2件目 (全2件中)
返信先: 作りながら学ぶjQueryデザインの教科書
あなたの情報: