195 lines
6.2 KiB
JavaScript
195 lines
6.2 KiB
JavaScript
(function($) {
|
|
$.simpleTxtSlider = function(element, options) {
|
|
var defaults = {
|
|
speed: 1000,
|
|
delay: 3000,
|
|
easing: 'swing',
|
|
effectType: 'slide'
|
|
}
|
|
var param = {
|
|
'ul': '',
|
|
'li': '',
|
|
'initList': '',
|
|
'ulWidth': '',
|
|
'liHeight': '',
|
|
'txtsliderHook': 'txtsliderHook',
|
|
'effect': {}
|
|
}
|
|
var bestslider = this;
|
|
bestslider.settings = {}
|
|
var $element = $(element),
|
|
element = element;
|
|
bestslider.init = function() {
|
|
bestslider.settings = $.extend({}, defaults, options);
|
|
param.ul = element.children('ul');
|
|
param.li = element.find('li');
|
|
param.initList = element.find('li:first');
|
|
param.ulWidth = param.ul.width();
|
|
param.liHeight = param.li.height();
|
|
element.css({
|
|
height: (param.liHeight)
|
|
});
|
|
param.li.css({
|
|
top: '0',
|
|
left: '0',
|
|
position: 'absolute'
|
|
});
|
|
//dispatch
|
|
switch (bestslider.settings.effectType) {
|
|
case 'fade':
|
|
bestslider.effect.fade();
|
|
break;
|
|
case 'roll':
|
|
bestslider.effect.roll();
|
|
break;
|
|
case 'slide':
|
|
bestslider.effect.slide();
|
|
break;
|
|
}
|
|
bestslider.effect.exec();
|
|
}
|
|
bestslider.effect = {};
|
|
bestslider.effect.exec = function() {
|
|
param.initList.css(param.effect.init.css)
|
|
.animate(param.effect.init.animate, bestslider.settings.speed, bestslider.settings.easing)
|
|
.addClass(param.txtsliderHook);
|
|
if (element.find(param.li).length > 1) {
|
|
setInterval(function() {
|
|
element.find('.' + param.txtsliderHook)
|
|
.animate(param.effect.start.animate, bestslider.settings.speed, bestslider.settings.easing)
|
|
.next()
|
|
.css(param.effect.next.css)
|
|
.animate(param.effect.next.animate, bestslider.settings.speed, bestslider.settings.easing)
|
|
.addClass(param.txtsliderHook)
|
|
.end()
|
|
.appendTo(param.ul)
|
|
.css(param.effect.end.css)
|
|
.removeClass(param.txtsliderHook);
|
|
}, bestslider.settings.delay);
|
|
}
|
|
}
|
|
bestslider.effect.fade = function() {
|
|
param.effect = {
|
|
'init': {
|
|
'css': {
|
|
display: 'block',
|
|
opacity: '0'
|
|
},
|
|
'animate': {
|
|
opacity: '1',
|
|
zIndex: '98'
|
|
}
|
|
},
|
|
'start': {
|
|
'animate': {
|
|
opacity: '0'
|
|
}
|
|
},
|
|
'next': {
|
|
'css': {
|
|
display: 'block',
|
|
opacity: '0',
|
|
zIndex: '99'
|
|
},
|
|
'animate': {
|
|
opacity: '1'
|
|
}
|
|
},
|
|
'end': {
|
|
'css': {
|
|
display: 'none',
|
|
zIndex: '98'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
bestslider.effect.roll = function() {
|
|
param.effect = {
|
|
'init': {
|
|
'css': {
|
|
top: '3em',
|
|
display: 'block',
|
|
opacity: '0'
|
|
},
|
|
'animate': {
|
|
top: '0',
|
|
opacity: '1',
|
|
zIndex: '98'
|
|
}
|
|
},
|
|
'start': {
|
|
'animate': {
|
|
top: '-3em',
|
|
opacity: '0'
|
|
}
|
|
},
|
|
'next': {
|
|
'css': {
|
|
top: '3em',
|
|
display: 'block',
|
|
opacity: '0',
|
|
zIndex: '99'
|
|
},
|
|
'animate': {
|
|
top: '0',
|
|
opacity: '1'
|
|
}
|
|
},
|
|
'end': {
|
|
'css': {
|
|
zIndex: '98'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
bestslider.effect.slide = function() {
|
|
param.effect = {
|
|
'init': {
|
|
'css': {
|
|
left: (200),
|
|
display: 'block',
|
|
opacity: '0'
|
|
},
|
|
'animate': {
|
|
left: '0',
|
|
opacity: '1',
|
|
zIndex: '98'
|
|
}
|
|
},
|
|
'start': {
|
|
'animate': {
|
|
left: (-(200)),
|
|
opacity: '0'
|
|
}
|
|
},
|
|
'next': {
|
|
'css': {
|
|
left: (param.ulWidth),
|
|
display: 'block',
|
|
opacity: '0',
|
|
zIndex: '99'
|
|
},
|
|
'animate': {
|
|
left: '0',
|
|
opacity: '1'
|
|
}
|
|
},
|
|
'end': {
|
|
'css': {
|
|
zIndex: '98'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
bestslider.init();
|
|
}
|
|
$.fn.simpleTxtSlider = function(options) {
|
|
return this.each(function() {
|
|
if (undefined == $(this).data('simpleTxtSlider')) {
|
|
var bestslider = new $.simpleTiecker(this, options);
|
|
$(this).data('simpleTxtSlider', bestslider);
|
|
}
|
|
});
|
|
}
|
|
})(jQuery);
|