Skip to content

Instantly share code, notes, and snippets.

@bokutin

bokutin/jCarousel.js

Forked from nashiki/jCarousel.js
Last active December 22, 2015 03:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bokutin/6411361 to your computer and use it in GitHub Desktop.
Save bokutin/6411361 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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"});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment