//插件名字:power-slider(多功能滚动插件)
//插件作者:蔡宝坚
//作者博客:http://caibaojian.com
//插件网站:http://caibaojian.com/power-slider
//使用协议:在保留头部版权的情况下,个人和商业均可免费使用
//使用范例:http://caibajian.com/demo/power-slider
;(function($) {
$.fn.powerslider = function(options) {
return this.each(function() {
var defualts = {
handle: "top",
//滚动方式
prevnext: true,
//显示上下的导航
nav: true,
//显示数字
mytitle: false,
//当为图片时且每屏为一张时才显示标题
speed: 600,
//动画速度
delaytime: 6000,
//动画间隔
clickmode: "click",
//数字导航滑过方式
slidernum: 1
};
//handle 为图片滚动方式
var opts = $.extend({}, defualts, options),
obj = $(this),
index = 0,
sliderbox = $(".sliderbox", obj),
sliderli = sliderbox.find("li"),
sliderliwidth = $(".sliderbox li:eq(0)").outerwidth(),
linum = sliderli.length,
len = (sliderli.length) / (opts.slidernum),
len = math.ceil(len),
slidernav = $(" .slidernav", obj),
slidertext = $(" .slidertext", obj),
prev = $(" .prev", obj),
next = $(" .next", obj),
slidertimer, navhtml = '',
texthtml = '';
//在动画还没有开始之前预定义的内容
for(var i = 0; i < len; i++) {
navhtml += '
';
}
//当动画方式为渐隐渐现时必须定义css的样式,否则动画过程会出现空白的视觉
if(opts.handle == 'fadeto') {
if(opts.slidernum<=1){
sliderli.css({
"position": "absolute",
"left": "0",
"top": "0"
});
}else{
sliderli.each(function(i){
$(this).css({
"position":"absolute",
"left":(i%opts.slidernum)*(sliderli.width()),
"top":"0"
})
})
}
var nextlen = parseint(opts.slidernum -1);
sliderbox.find("li:gt("+nextlen+")").hide();
//必须加这句css,否则渐隐渐显会出现一段空白的
}
//如果有导航数字的,js则在这里添加上去
if(opts.nav) {
slidernav.append(navhtml);
}
//当定义一屏的动画数目大于1时,内容为向左浮动
if(opts.slidernum > 1) {
sliderli.css("float", "left");
}
// obj.css({"width":(opts.slidernum)*sliderliwidth}); 由于内容多种多样性,且css列表也需要个性化,所有不加入这个固定宽度,请使用css自定义整体的宽度
var slidertitle = slidertext.find("li"),
slidera = slidernav.find("li");
//当有文字标题时预先显示第一张,其余css已经设置隐藏
slidertitle.eq(0).show();
//默认第一张添加了一个类名current
slidera.eq(0).addclass("current"), sliderli.eq(0).addclass("current");
//结束动画开始之前的加载
//滚动的主要函数,i的初始值为第一个,也就是0,index是随着i而变化的
function showimg(i, index) {
var sliderheight = obj.height(),
sliderwidth = obj.width();
slidertitle.hide().eq(index).show();
slidera.removeclass("current").eq(index).addclass("current"), sliderli.removeclass("current").eq(index).addclass("current");
if(opts.handle == 'top') {
sliderbox.filter(":not(':animated')").animate({
"top": -sliderheight * index
}, opts.speed);
} else if(opts.handle == 'left') {
sliderli.css("float", "left");
sliderbox.css("width", len * sliderwidth).filter(":not(':animated')").animate({
"left": -sliderwidth * index
}, opts.speed);
} else if(opts.handle == 'hide') {
var j = index + 1;
sliderli.hide().slice(index * (opts.slidernum), j * (opts.slidernum)).show();
} else if(opts.handle == 'fadeto') {
sliderli.slice(i*(opts.slidernum),(i+1)*(opts.slidernum)).fadeout(opts.speed);
sliderli.slice(index*(opts.slidernum),(index+1)*(opts.slidernum)).filter(":not(':animated')").fadein(opts.speed);
} else if(opts.handle == 'slideto') {
sliderli.css("z-index", '1').filter(":not(':animated')").slideup().slice(index*(opts.slidernum),(index+1)*(opts.slidernum)).css("z-index", "2").slidedown(opts.speed);
}
}
slidera.bind(opts.clickmode,function(){
index = $(this).index();
var i = slidera.index($(".slidernav .current:eq(0)"));
if(index != i) {
showimg(i, index);
}
});
if(len <= 1) {
prev.hide();
next.hide();
} else {
if(opts.prevnext) {
//prev
prev.click(function() {
var i = index;
index -= 1;
if(index == -1) {
index = len - 1
};
showimg(i, index);
});
// //next
next.click(function() {
auto();
});
}
}
//auto fn
function auto() {
var i = index;
index = (index + 1) % len;
showimg(i, index);
}
//set time
var settime;
obj.hover(function(){
clearinterval(settime);
},function(){
settime = setinterval(function(){
auto();
},opts.delaytime);
}).trigger("mouseleave");
});
};
})(jquery);