ど素人から毛を生やす。<延>

かなり万能なカルーセルだと信じてるjs

Web > javascript 2014年6月13日(最終更新:2年前)

このページは2014.6.13に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
休日が待ち遠しい餅。です。

今回はjs、というかjQuery。

カルーセルというものについて、今までその都度作ったり改造したりしていましたが
そろそろこれ一つで大体の状況に対応できるんでね?って感じになってきたので
ひとつの完成品として公開。

// JavaScript Document

$(function(){

    var productHow = $('カルーセル中身').length;    // カルーセルの数
    var productno = 1 ;     // カルーセルの現在番号
    var slidflug = 1 ;

    var d = 700 //  画像の幅

    var q = productHow * d ; // カルーセルの基準位置(ずれるときは個別調整)

    var element = $('カルーセル中身').clone(true) ; // カルーセルを複製
    $("カルーセル親").append(element); // cal ul の末尾に複製を挿入
    var element = $('カルーセル中身').clone(true) ; // カルーセルを複製
    $("カルーセル親").append(element); // cal ul の末尾に複製を挿入(2回やっとく)

    setInterval(function() {
		if(slidflug === 1 ){
                if(productno >= productHow){
                    productno=1;
                }else{
                    productno++;
                }

            var p = q + ( ( productno - 2 ) * d ) ;

            $("カルーセル祖父母要素").animate({scrollLeft:p}, 1, "swing", function(){

                p =  q + ( ( productno - 1 ) * d ) ;

                $("カルーセル祖父母要素").animate({scrollLeft:p}, 1000, "swing");

            });
		}else{
			slidflug = 1 ;
		}
    }, 6000); //スライド時間間隔(個別調整)

$("前へボタン").click(function () {
 if(productno === 1 ){
                    productno = productHow;
                }else{
                    productno--;
                }

            var p = q + ( ( productno ) * d ) ;

            $("カルーセル祖父母要素").animate({scrollLeft:p}, 1, "swing", function(){

                p =  q + ( ( productno -1 ) * d ) ;

                $("カルーセル祖父母要素").animate({scrollLeft:p}, 1000, "swing");

            });
			slidflug = 0 ;
});

$("次へボタン").click(function () {
if(productno >= productHow){
                    productno=1;
                }else{
                    productno++;
                }

            var p = q + ( ( productno - 2 ) * d ) ;

            $("カルーセル祖父母要素").animate({scrollLeft:p}, 1, "swing", function(){

                p =  q + ( ( productno - 1 ) * d ) ;

                $("カルーセル祖父母要素").animate({scrollLeft:p}, 1000, "swing");

            });
			slidflug = 0 ;
});

});

HTMLは、祖父母要素>親要素>カルーセル中身と設置。

CSSは、祖父母要素にwidth:カルーセルの幅とoverflow:hidden;。
親要素にwidth:カルーセル合計*4以上。
カルーセルはfloat:leftか、display:inline-block;letter-spacing:-.40em;かそこらで
ぺったり横並べ。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)