;(function($,window,document,undefined){
var inits = function(ele,opts){
this.$ele = ele,
this.defaults = {
_width: 670, //设置图轮播图大小
_height: 500,
page: 'page', //是否启用导航图标,有值时启用,值为导航图标列表的样式类,为空时不启用导航列表
btn: true, //是否启用上下一页按钮,true为启用,false或者空为不启用。如果启用,请在下面的四个属性中赋值,为按钮添加样式类和按钮文字
nextclass: 'pro_next', //下一张 按钮样式类
prevclass: 'pro_prv', //上一张 按钮样式类
nexttext: '',
prevtext: '',
fade: 'normal', //图片切换速度 可能的值slow/normal/fast/毫秒(比如 1500)
time: '', //可能的值(毫秒)1000\2000...
pagenum: false, //是否启用数字做轮播导航 true为启用,false不启用
pagelocat: true //轮播导航图标是否要居中 true/fasle 默认为居中
},
this.init = $.extend({}, this.defaults, opts);
}
inits.prototype = {
slidefade: function(){
var ul = this.$ele.children('ul.list');
var li = ul.children('li');
li.eq(0).show().siblings('li').hide();
var init = this.init;
//slide
this.$ele.css({
position: 'relative',
width: init._width+'px',
height: init._height+'px',
margin: '0 auto'
});
li.css({
position: 'absolute',
left: 0,
width: init._width+'px',
height: init._height+'px'
});
li.find('img').css({
width: '100%',
height: '100%'
});
//page==buiding
if (init.page!=''&&init.page!=undefined) {
this.$ele.append('
');
// buiding-page
for (var i = 0; i < li.length; i++) {
if (init.pagenum==true) {
$('.'+init.page).append(''+(i+1)+'');
}else if(init.pagenum==false){
$('.'+init.page).append(' ');
}
};
var page = $('.'+init.page);
var pageli = page.children('li');
pageli.css('float', 'left');
var pageliw = math.ceil(pageli.outerwidth(true)+0.05)*pageli.length;
var pagetoleft = init._width/2-pageliw/2;
pageli.eq(0).addclass('on');
page.css({
position: 'absolute',
width: pageliw+'px'
});
if (init.pagelocat==true) {
page.css('left', pagetoleft+'px');
};
};
//btn==buiding
if (init.btn==true) {
this.$ele.append(''+init.prevtext+''+init.nexttext+'');
var btntotop = math.round(init._height/2-this.$ele.children('a.sbtn').height()/2);
this.$ele.children('a.sbtn').css({
position: 'absolute',
top: btntotop+'px'
});
if (init.nextclass!=''||init.prevclass!='') {
this.$ele.children('a.sbtn').eq(0).addclass(init.prevclass).next('a.sbtn').addclass(init.nextclass);
}
};
//==========
var i = 0;
var next = function(fade){
li.eq(i).fadeout(fade).next().fadein(fade);
page.children('li').eq(i).removeclass('on').next().addclass('on');
i++;
if (i>li.length-1) {
i=0;
li.eq(i).fadein(fade);
page.children('li').eq(i).addclass('on');
}
};
var prev = function(fade){
console.log(li.length);
if (i==0) {
i=li.length-1;
li.eq(0).fadeout(fade);
li.eq(i).fadein(fade);
page.children('li').eq(0).removeclass('on');
page.children('li').eq(i).addclass('on');
}else{
li.eq(i).fadeout(fade).prev().fadein(fade);
page.children('li').eq(i).removeclass('on').prev().addclass('on');
i--;
}
}
//下一张
$('.pro_next').click(function(event) {
next(init.fade);
});
//上一张
$('.pro_prv').click(function(event) {
prev(init.fade);
});
// 是否自动轮播
if (init.time!=''&&init.time!=undefined) {
var timerun = setinterval(next,init.time);
//鼠标经过图片
li.each(function(index, el) {
$(this).mouseover(function(event) {
clearinterval(timerun);
}).mouseout(function(event) {
timerun = setinterval(next,init.time);
});
});
};
if (init.page!=''&&init.page!=undefined) {
//点击导航图标
pageli.each(function(index, el) {
$(this).click(function(event) {
console.log(index);
i=index;
console.log(i);
li.eq(i).fadein(init.fade).siblings('li').fadeout(init.fade);
page.children('li').eq(i).addclass('on').siblings('li').removeclass('on');
});
});
};
}//slidefade end
}
// 插件中调用
$.fn.mdsslidefade = function(opts){
var inits = new inits(this,opts);
return inits.slidefade();
}
})(jquery, window, document);