/**
* @Version :1.0.0
* @WebSite :http://www.9377.com/
* @DateTime :2015-08-21 16:00:29
* 幻灯片插件
**/
(function($){
// 幻灯
$.fn.slideBox = function(options){
var defaults = {
mode : 'fade', // 滚动效果 left,top,fade,show
duration : 0.4, // 过渡时间, 秒
easing : 'linear', // 过渡效果 swing, linear
delay : 4, // 间隔, 秒
optevent: 'mouseenter', // 操作事件:click, mouseenter
navCell : true, // 导航按钮
nextBtn : false, // 下一页按钮
prevBtn : false, // 上一页按钮
autoPlay : true, // 自动播放
viewItem : 1 // 滚动数量
};
// 计算数据
var settings = $.extend(defaults, options || {});
var wrapper = $(this),
ul = wrapper.find('.slide-bd'),
lis = ul.find('li'),
first_pic = lis.first().find('img'),
li_num = lis.length,
li_width = 0,
li_height = 0,
index = 0,
navlis = '';
// 初始化
var init = function(){
if (!wrapper.length) return false;
wrapper.data('out', 1);
li_width = lis.first().outerWidth(true);
li_height = lis.first().outerHeight(true);
var fd = $('
').appendTo(wrapper); // 操作按钮div
// 导航按钮
if (settings.navCell) {
var navs = $('').appendTo(fd);
var navs_html = '';
for( var i = 1; i <= li_num; i++){
navs_html += ''+i+'';
}
navs.append(navs_html);
navlis = navs.find('li');
navlis.bind( settings.optevent, function(){
index = $(this).index();
slide();
})
};
// 下一页
if (settings.nextBtn || settings.prevBtn) {
var opt_btn = $('').appendTo(fd);
};
if (settings.nextBtn) {
var nextbtn = $('>').appendTo(opt_btn);
nextbtn.bind('click', function(){
index++;
slide();
});
if (settings.mode == 'left' || settings.mode == 'top') {
for( var i = 0; i < settings.viewItem; i++){
lis.eq(i).clone().addClass('li-clone').appendTo(ul);
}
}
};
if (settings.prevBtn) {
var prevbtn = $('<').appendTo(opt_btn);
prevbtn.bind('click', function(){
index--;
slide();
});
if ((settings.mode == 'left' || settings.mode == 'top')) {
lis.last().clone().addClass('li-clone').prependTo(ul);
}
};
lis = ul.find('li');
if (settings.mode == 'left') {
ul.css({'width': lis.length * li_width, 'left': -li_width});
}else if(settings.mode == 'top'){
ul.css({'height': lis.length * li_height, 'top': -li_height});
}
lis.length > 0 && slide() && settings.autoPlay && start();
};
// 执行
var slide = function(){
if (settings.mode == 'fade' || settings.mode == 'show') {
if (index >= li_num) {
index = 0;
}else if(index < 0){
index = li_num - 1;
}
};
if (settings.mode == 'fade') {
lis.eq(index).fadeIn().siblings().fadeOut();
}else if (settings.mode == 'show') {
lis.eq(index).show().siblings().hide();
}else if (settings.mode == 'left') {
if(index >= li_num){
var param = {'left': -(index+1) * li_width};
ul.stop(true,false).animate(param, settings.duration*1000, settings.easing, function(){
ul.css({'left': -li_width});
});
index = 0;
}else if(index < 0){
var param = {'left': '0px'};
ul.stop(true,false).animate(param, settings.duration*1000, settings.easing, function(){
ul.css({'left': -li_width*li_num})
});
index = li_num-1;
}else{
var param = {'left': -(index+1) * li_width};
ul.stop(true,false).animate(param, settings.duration*1000, settings.easing);
}
}else if (settings.mode == 'top') {
if(index >= li_num){
var param = {'top': -(index+1) * li_height};
ul.stop(true,false).animate(param, settings.duration*1000, settings.easing, function(){
ul.css({'top': -li_height})
});
index = 0;
}else if(index < 0){
var param = {'top': '0px'};
ul.stop(true,false).animate(param, settings.duration*1000, settings.easing, function(){
ul.css({'top': -li_height*li_num})
});
index = li_num-1;
}else{
var param = {'top': -(index+1) * li_height};
ul.stop(true,false).animate(param, settings.duration*1000, settings.easing);
}
};
if (settings.navCell) {
navlis.eq(index).addClass('active').siblings().removeClass('active');
};
wrapper.data('out') && settings.autoPlay && start();
}
// 自动
var auto = function(){
index++;
slide();
}
// 开始
var start = function(){
wrapper.data('timeid', window.setTimeout(auto, settings.delay*1000));
};
// 停止
var stop = function(){
window.clearTimeout(wrapper.data('timeid'));
}
// 鼠标经过事件
if (settings.autoPlay) {
wrapper.hover(function(){
wrapper.data('out', 0);
stop();
},function(){
wrapper.data('out', 1);
start();
})
};
init();
}
})(jQuery)