|
|
/*
|
|
|
* loopedSlider - jQuery plugin
|
|
|
* Modify By Wushitang 2011-1-18
|
|
|
*/
|
|
|
|
|
|
if(typeof jQuery != 'undefined') {
|
|
|
jQuery(function($) {
|
|
|
$.fn.extend({
|
|
|
loopedSlider: function(options) {
|
|
|
var settings = $.extend({}, $.fn.loopedSlider.defaults, options);
|
|
|
|
|
|
return this.each(
|
|
|
function() {
|
|
|
if($.fn.jquery < '1.3.2') {return;}
|
|
|
var $t = $(this);
|
|
|
var o = $.metadata ? $.extend({}, settings, $t.metadata()) : settings;
|
|
|
|
|
|
var distance = 0;
|
|
|
var times = 1;
|
|
|
var slides = $(o.slides,$t).children().size();
|
|
|
var width = $(o.slides,$t).children().outerWidth();
|
|
|
var position = 0;
|
|
|
var active = false;
|
|
|
var number = 0;
|
|
|
var interval = 0;
|
|
|
var restart = 0;
|
|
|
var pagination = $("."+o.pagination+" li a",$t);
|
|
|
var SliderNav = $("#SliderNav");
|
|
|
SliderNav.html(times + "/" + slides);
|
|
|
|
|
|
if(o.addPagination && !$(pagination).length){
|
|
|
var buttons = slides;
|
|
|
$($t).append("<ul class="+o.pagination+">");
|
|
|
$(o.slides,$t).children().each(function(){
|
|
|
if (number<buttons) {
|
|
|
$("."+o.pagination,$t).append("<li><a rel="+(number+1)+" href=\"#\" >"+(number+1)+"</a></li>");
|
|
|
number = number+1;
|
|
|
} else {
|
|
|
number = 0;
|
|
|
return false;
|
|
|
}
|
|
|
$("."+o.pagination+" li a:eq(0)",$t).parent().addClass("active");
|
|
|
});
|
|
|
pagination = $("."+o.pagination+" li a",$t);
|
|
|
} else {
|
|
|
$(pagination,$t).each(function(){
|
|
|
number=number+1;
|
|
|
$(this).attr("rel",number);
|
|
|
$(pagination.eq(0),$t).parent().addClass("active");
|
|
|
});
|
|
|
}
|
|
|
|
|
|
if (slides===1) {
|
|
|
$(o.slides,$t).children().css({position:"absolute",left:position,display:"block"});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
$(o.slides,$t).css({width:(slides*width)});
|
|
|
|
|
|
$(o.slides,$t).children().each(function(){
|
|
|
$(this).css({position:"absolute",left:position,display:"block"});
|
|
|
position=position+width;
|
|
|
});
|
|
|
|
|
|
$(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:-width});
|
|
|
|
|
|
if (slides>3) {
|
|
|
$(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:-width});
|
|
|
}
|
|
|
|
|
|
if(o.autoHeight){autoHeight(times);}
|
|
|
|
|
|
$(".next",$t).click(function(){
|
|
|
if(active===false) {
|
|
|
animate("next",true);
|
|
|
if(o.autoStart){
|
|
|
if (o.restart) {autoStart();}
|
|
|
else {clearInterval(sliderIntervalID);}
|
|
|
}
|
|
|
} return false;
|
|
|
});
|
|
|
|
|
|
$(".previous",$t).click(function(){
|
|
|
if(active===false) {
|
|
|
animate("prev",true);
|
|
|
if(o.autoStart){
|
|
|
if (o.restart) {autoStart();}
|
|
|
else {clearInterval(sliderIntervalID);}
|
|
|
}
|
|
|
} return false;
|
|
|
});
|
|
|
|
|
|
if (o.containerClick) {
|
|
|
$(o.container,$t).click(function(){
|
|
|
if(active===false) {
|
|
|
animate("next",true);
|
|
|
if(o.autoStart){
|
|
|
if (o.restart) {autoStart();}
|
|
|
else {clearInterval(sliderIntervalID);}
|
|
|
}
|
|
|
} return false;
|
|
|
});
|
|
|
}
|
|
|
|
|
|
$(pagination,$t).click(function(){
|
|
|
if ($(this).parent().hasClass("active")) {return false;}
|
|
|
else {
|
|
|
times = $(this).attr("rel");
|
|
|
$(pagination,$t).parent().siblings().removeClass("active");
|
|
|
$(this).parent().addClass("active");
|
|
|
animate("fade",times);
|
|
|
if(o.autoStart){
|
|
|
if (o.restart) {autoStart();}
|
|
|
else {clearInterval(sliderIntervalID);}
|
|
|
}
|
|
|
} return false;
|
|
|
});
|
|
|
|
|
|
if (o.autoStart) {
|
|
|
sliderIntervalID = setInterval(function(){
|
|
|
if(active===false) {animate("next",true);}
|
|
|
},o.autoStart);
|
|
|
function autoStart() {
|
|
|
if (o.restart) {
|
|
|
clearInterval(sliderIntervalID);
|
|
|
clearInterval(interval);
|
|
|
clearTimeout(restart);
|
|
|
restart = setTimeout(function() {
|
|
|
interval = setInterval( function(){
|
|
|
animate("next",true);
|
|
|
},o.autoStart);
|
|
|
},o.restart);
|
|
|
} else {
|
|
|
sliderIntervalID = setInterval(function(){
|
|
|
if(active===false) {animate("next",true);}
|
|
|
},o.autoStart);
|
|
|
}
|
|
|
};
|
|
|
if (o.hoverPause) {
|
|
|
$(o.slides,$t).mouseenter(function(){
|
|
|
clearInterval(sliderIntervalID);
|
|
|
clearInterval(interval);
|
|
|
clearTimeout(restart);
|
|
|
});
|
|
|
$(o.slides,$t).mouseleave(function(){
|
|
|
sliderIntervalID = setInterval(function(){
|
|
|
if(active===false) {animate("next",true);}
|
|
|
},o.autoStart);
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function current(times) {
|
|
|
if(times===slides+1){times = 1;}
|
|
|
if(times===0){times = slides;}
|
|
|
$(pagination,$t).parent().siblings().removeClass("active");
|
|
|
$(pagination+"[rel='" + (times) + "']",$t).parent().addClass("active");
|
|
|
SliderNav.html(times + "/" + slides);
|
|
|
};
|
|
|
|
|
|
function autoHeight(times) {
|
|
|
if(times===slides+1){times=1;}
|
|
|
if(times===0){times=slides;}
|
|
|
var getHeight = $(o.slides,$t).children(":eq("+(times-1)+")",$t).outerHeight();
|
|
|
$(o.container,$t).animate({height: getHeight},o.autoHeight);
|
|
|
};
|
|
|
|
|
|
function animate(dir,clicked){
|
|
|
active = true;
|
|
|
switch(dir){
|
|
|
case "next": //<2F><>һ<EFBFBD><D2BB>
|
|
|
times = times+1;
|
|
|
distance = (-(times*width-width));
|
|
|
current(times);
|
|
|
if(o.autoHeight){autoHeight(times);}
|
|
|
if(slides<3){
|
|
|
if (times===3){$(o.slides,$t).children(":eq(0)").css({left:(slides*width)});}
|
|
|
if (times===2){$(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:width});}
|
|
|
}
|
|
|
$(o.slides,$t).animate({left: distance}, o.slidespeed,function(){
|
|
|
if (times===slides+1) {
|
|
|
times = 1;
|
|
|
$(o.slides,$t).css({left:0},function(){$(o.slides,$t).animate({left:distance})});
|
|
|
$(o.slides,$t).children(":eq(0)").css({left:0});
|
|
|
$(o.slides,$t).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});
|
|
|
}
|
|
|
if (times===slides) $(o.slides,$t).children(":eq(0)").css({left:(slides*width)});
|
|
|
if (times===slides-1) $(o.slides,$t).children(":eq("+(slides-1)+")").css({left:(slides*width-width)});
|
|
|
active = false;
|
|
|
});
|
|
|
break;
|
|
|
case "prev": //<2F><>һ<EFBFBD><D2BB>
|
|
|
times = times-1;
|
|
|
distance = (-(times*width-width));
|
|
|
current(times);
|
|
|
if(o.autoHeight){autoHeight(times);}
|
|
|
if (slides<3){
|
|
|
if(times===0){$(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:(-width)});}
|
|
|
if(times===1){$(o.slides,$t).children(":eq(0)").css({position:"absolute",left:0});}
|
|
|
}
|
|
|
$(o.slides,$t).animate({left: distance}, o.slidespeed,function(){
|
|
|
if (times===0) {
|
|
|
times = slides;
|
|
|
$(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:(slides*width-width)});
|
|
|
$(o.slides,$t).css({left: -(slides*width-width)});
|
|
|
$(o.slides,$t).children(":eq(0)").css({left:(slides*width)});
|
|
|
}
|
|
|
if (times===2 ) $(o.slides,$t).children(":eq(0)").css({position:"absolute",left:0});
|
|
|
if (times===1) $(o.slides,$t).children(":eq("+ (slides-1) +")").css({position:"absolute",left:-width});
|
|
|
active = false;
|
|
|
});
|
|
|
break;
|
|
|
case "fade": //<2F><><EFBFBD><EFBFBD>Ŀ<EFBFBD><C4BF>
|
|
|
times = [times]*1;
|
|
|
distance = (-(times*width-width));
|
|
|
current(times);
|
|
|
if(o.autoHeight){autoHeight(times);}
|
|
|
$(o.slides,$t).children().fadeOut(o.fadespeed, function(){
|
|
|
$(o.slides,$t).css({left: distance});
|
|
|
$(o.slides,$t).children(":eq("+(slides-1)+")").css({left:slides*width-width});
|
|
|
$(o.slides,$t).children(":eq(0)").css({left:0});
|
|
|
if(times===slides){$(o.slides,$t).children(":eq(0)").css({left:(slides*width)});}
|
|
|
if(times===1){$(o.slides,$t).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});}
|
|
|
$(o.slides,$t).children().fadeIn(o.fadespeed, function() {
|
|
|
//removing filter from IE
|
|
|
if(jQuery.browser.msie) {
|
|
|
$(this).get(0).style.removeAttribute('filter');
|
|
|
}
|
|
|
});
|
|
|
active = false;
|
|
|
});
|
|
|
break;
|
|
|
default:
|
|
|
break;
|
|
|
}
|
|
|
};
|
|
|
}
|
|
|
);
|
|
|
}
|
|
|
});
|
|
|
$.fn.loopedSlider.defaults = {
|
|
|
container: ".container", //Class/id of main container. You can use "#container" for an id.
|
|
|
slides: ".slides", //Class/id of slide container. You can use "#slides" for an id.
|
|
|
pagination: "pagination", //Class name of parent ul for numbered links. Don't add a "." here.
|
|
|
containerClick: true, //Click slider to goto next slide? true/false
|
|
|
autoStart: 0, //Set to positive number for true. This number will be the time between transitions.
|
|
|
restart: 0, //Set to positive number for true. Sets time until autoStart is restarted.
|
|
|
hoverPause: false, //Set to true to pause on hover, if autoStart is also true
|
|
|
slidespeed: 300, //Speed of slide animation, 1000 = 1second.
|
|
|
fadespeed: 200, //Speed of fade animation, 1000 = 1second.
|
|
|
autoHeight: 0, //Set to positive number for true. This number will be the speed of the animation.
|
|
|
addPagination: false //Add pagination links based on content? true/false
|
|
|
};
|
|
|
});
|
|
|
} |