Created
September 23, 2011 07:01
-
-
Save nashiki/1236878 to your computer and use it in GitHub Desktop.
Android対応、Auto Rotate機能追加しました。23行目で間隔をミリ秒で設定して下さい。(0でAuto Rotateしません。)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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() | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment