jCarousel.js

/*
 * jCarousel - jQuery Plugin
 * http://d.hatena.ne.jp/kudakurage/
 *
 * Copyright (c) 2010 Kazuyuki Motoyama
 * Licensed under the MIT license
 *
 * $Date: 2010-11-28
 * $version: 1.3
 * 
 * This jQuery plugin will only run on devices running Mobile Safari
 * on iPhone or iPod Touch devices running iPhone OS 2.0 or later. 
 * http://developer.apple.com/iphone/library/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5
 */
var jCarousel = {
    ua: "pc",
    num: 0,
    target: new Array,
    sel: new Array,
    activeBool: false,
    active: 0,
    main: 0,
    interval: 3000, // Auto Rotate: mill second, 0=no auto rotate
    interval_touchwait: 2,
    colorSet: {
        black: {
            back: "#eee",
            active: "#888",
            shadow: "#333"
        },
        white: {
            back: "#ddd",
            active: "#999",
            shadow: "#333"
        }
    }
};
jCarousel.set = function (arg) {
    jCarousel.color = jCarousel.colorSet.black;
    jCarousel.main = 0;
    jCarousel.interval_wait = 0;
    if (typeof arg == "object") {
        if (arg.color == "white") jCarousel.color = jCarousel.colorSet.white;
        if (!isNaN(arg.main)) jCarousel.main = eval(arg.main)
    }

    $(".jCarousel").each(function () {
        if (!$(this).attr("name")) {
            var tNum = jCarousel.num;
            var target = this;
            var tWidth = $(target).width();
            var tMax = $(target).find("li").length;
            $(".jCarousel:after").css({
                visibility: "hidden",
                display: "block",
                clear: "both",
                height: 0,
                fontSize: 0,
                content: "."
            });
            $(".jCarousel").css({
                display: "inline-table",
                minHeight: "1%"
            });
            var tHeight = $(target).height();
            $(target).attr("name", tNum);
            $(target).attr("id", "jCarousel-object" + tNum);
            jCarousel.target[tNum] = target;
            jCarousel.sel[tNum] = {
                width: tWidth,
                max: tMax,
                left: 0,
                current: 0,
                startX: 0,
                endX: 0,
                auto: 0
            };
            $(target).wrap('<div class="jCarouselWrapper' + tNum + '"></div>');
            var naviInner = "";
            for (var i = 0; i < tMax; i++) naviInner += '<a rel="' + i + '" name="' + tNum + '"></a>';
            $(".jCarouselWrapper" + tNum).append('<div class="jCarouselNavi">' + naviInner + "</div>");
            $(".jCarouselWrapper" + tNum + ' .jCarouselNavi a[rel="' + jCarousel.sel[tNum].current + '"]').addClass("selected");
            $(".jCarouselWrapper" + tNum).css({
                overflow: "hidden",
                width: "100%"
            });
            $(target).css({
                width: "900000px",
                listStyle: "none",
                padding: 0,
                margin: 0,
                backgroundColor: "transparent"
            });
            $("#jCarousel-object" + tNum + " > li").css("float", "left");
            $("#jCarousel-object" + tNum + " > li").css({
                width: tWidth + "px",
                listStyle: "none",
                padding: 0,
                margin: 0,
                color: "#000"
            });
            $(".jCarouselWrapper" + tNum + " .jCarouselNavi").css({
                clear: "both",
                textAlign: "center"
            });
            $(".jCarouselWrapper" + tNum + " .jCarouselNavi a").css({
                display: "inline-block",
                width: "8px",
                height: "8px",
                margin: "5px",
                padding: "0px",
                backgroundColor: jCarousel.color.back,
                cursor: "pointer",
                borderRadius: "5px",
                boxShadow: "0px -2px 1px " + jCarousel.color.shadow,
                webkitBorderRadius: "5px",
                webkitBoxShadow: "0px -2px 1px " + jCarousel.color.shadow,
                mozBorderRadius: "5px",
                mozBoxShadow: "0px -2px 1px " + jCarousel.color.shadow
            });
            $(".jCarouselWrapper" + tNum + " .jCarouselNavi a.selected").css({
                backgroundColor: jCarousel.color.active
            });
            if (jCarousel.ua == "mobile") {
                $(target).bind("touchstart", function () {
                    var tNum = $(this).attr("name");
                    jCarousel.active = tNum;
                    jCarousel.sel[tNum].startX = event.touches[0].pageX;
                    jCarousel.sel[tNum].startY = event.touches[0].pageY;
                    jCarousel.activeBool = true
                    jCarousel.interval_wait = jCarousel.interval_touchwait;
                });
                $(window).bind("touchmove", function () {
                    if (jCarousel.activeBool) {
                        var tNum = jCarousel.active;
                        jCarousel.sel[tNum].endX = event.touches[0].pageX;
                        jCarousel.sel[tNum].endY = event.touches[0].pageY;
                        var offsetX = -jCarousel.sel[tNum].startX + jCarousel.sel[tNum].endX;
                        var offsetY = -jCarousel.sel[tNum].startY + jCarousel.sel[tNum].endY;
                        if (offsetX / offsetY > 0.5 || offsetX / offsetY < -0.5) {
                            event.preventDefault();
                            $(jCarousel.target[tNum]).css({
                                marginLeft: jCarousel.sel[tNum].left + offsetX + "px"
                            })
                        } else jCarousel.activeBool = false
                    }
                });
                $(window).bind("touchend", function () {
                    if (jCarousel.activeBool) {
                        jCarousel.activeBool = false;
                        var tNum = jCarousel.active;
                        var offsetX = -jCarousel.sel[tNum].startX + jCarousel.sel[tNum].endX;
                        var eventArea = jCarousel.sel[tNum].width / 5;
                        var carouselNum = jCarousel.sel[tNum].current;
                        var carouselMax = jCarousel.sel[tNum].max;
                        if (offsetX > eventArea && carouselNum > 0) carouselNum--;
                        else if (offsetX < -eventArea && carouselNum < carouselMax - 1) carouselNum++;
                        jCarousel.slide(tNum, carouselNum, 250)
                    }
                })
            }
            if (jCarousel.ua == "pc") {
                $(target).bind("mousedown", function (event) {
                    var tNum = $(this).attr("name");
                    jCarousel.active = tNum;
                    jCarousel.sel[tNum].startX = event.pageX;
                    jCarousel.activeBool = true;
                    jCarousel.interval_wait = jCarousel.interval_touchwait;
                    return false
                });
                $(window).bind("mousemove", function (event) {
                    if (jCarousel.activeBool) {
                        var tNum = jCarousel.active;
                        jCarousel.sel[tNum].endX = event.pageX;
                        var offset = -jCarousel.sel[tNum].startX + jCarousel.sel[tNum].endX;
                        $(jCarousel.target[tNum]).css({
                            marginLeft: jCarousel.sel[tNum].left + offset + "px"
                        })
                    }
                });
                $(window).bind("mouseup", function (event) {
                    if (jCarousel.activeBool) {
                        jCarousel.activeBool = false;
                        var tNum = jCarousel.active;
                        jCarousel.sel[tNum].endX = event.pageX;
                        var offset = -jCarousel.sel[tNum].startX + jCarousel.sel[tNum].endX;
                        var eventArea = jCarousel.sel[tNum].width / 5;
                        var carouselNum = jCarousel.sel[tNum].current;
                        var carouselMax = jCarousel.sel[tNum].max;
                        if (offset > eventArea && carouselNum > 0) carouselNum--;
                        else if (offset < -eventArea && carouselNum < carouselMax - 1) carouselNum++;
                        jCarousel.slide(tNum, carouselNum, 250)
                    }
                })
            }
            $(".jCarouselNavi a").click(function () {
                var tNum = $(this).attr("name");
                var carouselNum = parseInt( $(this).attr("rel") );
                jCarousel.slide(tNum, carouselNum, 250);
                jCarousel.interval_wait = jCarousel.interval_touchwait;
                return false
            });

            if (jCarousel.interval != 0 ){
              setInterval(function(){
                  if(jCarousel.interval_wait != 0){
                    jCarousel.interval_wait --;
                    return false;
                  }
                  var tNum = jCarousel.active;
                  var carouselNum = jCarousel.sel[tNum].current + 1;
                  var carouselMax = jCarousel.sel[tNum].max;
                  if (carouselNum == carouselMax) carouselNum = 0;
                  jCarousel.slide(tNum, carouselNum, 1200);
                  return false
              }, jCarousel.interval);
            }

            jCarousel.num++
        }
    })
};
jCarousel.ini = function () {
    var ua = navigator.userAgent;
    if (ua.indexOf("iPhone") > -1 || ua.indexOf("iPad") > -1 || ua.indexOf("iPod") > -1 || ua.indexOf("Android") > -1) jCarousel.ua = "mobile";
    else jCarousel.ua = "pc";
    $(window).keydown(function (e) {
        if (e.keyCode == 39) {
            var tNum = jCarousel.main;
            var carouselNum = jCarousel.sel[tNum].current;
            var carouselMax = jCarousel.sel[tNum].max;
            if (carouselNum < carouselMax - 1) {
                carouselNum++;
                jCarousel.slide(tNum, carouselNum, 250)
            }
        }
        if (e.keyCode == 37) {
            var tNum = jCarousel.main;
            var carouselNum = jCarousel.sel[tNum].current;
            if (carouselNum > 0) {
                carouselNum--;
                jCarousel.slide(tNum, carouselNum, 250)
            }
        }
    });
    $(window).bind("orientationchange", function () {
        jCarousel.resize()
    });
    $(window).resize(function () {
        jCarousel.resize()
    })
};
jCarousel.slide = function (activeNum, carouselNum, speed) {
    jCarousel.activeBool = false;
    var tNum = activeNum;
    var margin = -carouselNum * jCarousel.sel[tNum].width;
    $(jCarousel.target[tNum]).animate({
        marginLeft: margin + "px"
    }, speed, "easeCarousel", function () {});
    jCarousel.sel[tNum].left = margin;
    jCarousel.sel[tNum].current = carouselNum;
    $(".jCarouselWrapper" + tNum + " .jCarouselNavi a").css({
        backgroundColor: jCarousel.color.back
    });
    $(".jCarouselWrapper" + tNum + " .jCarouselNavi a[rel='" + carouselNum + "']").css({
        backgroundColor: jCarousel.color.active
    })
};
jCarousel.resize = function () {
    $(".jCarousel").each(function () {
        var target = this;
        var tNum = $(target).attr("name");
        var tWidth = $(".jCarouselWrapper" + tNum).width();
        jCarousel.sel[tNum].width = tWidth;
        var margin = -jCarousel.sel[tNum].current * jCarousel.sel[tNum].width;
        jCarousel.sel[tNum].left = margin;
        $(target).find("li").css({
            width: tWidth + "px"
        });
        $(target).css({
            marginLeft: margin + "px"
        })
    })
};
jQuery.extend(jQuery.easing, {
    easeCarousel: function (x, t, b, c, d) {
        return c * ((t = t / d - 1) * t * t + 1) + b
    }
});
$(function () {
    jCarousel.ini();
    jCarousel.set()

    // Galaxy S4 だとなぜか、スクロールはするが、画像が非表示になってしまう。
    // Mozilla/5.0 (Linux; Android 4.2.2; ja-jp; SC-04E Build/JDQ39) AppleWebKit/535.19 (KHTML, like Gecko) Version/1.0 Chrome/18.0.1025.308 Mobile Safari/535.19
    // 下の一文を入れたら動くようにはなった。
    // 実機が無いので、この変更が適切かどうか試せていません。
    $(".jCarousel").css({visibility:"visible"});
});