/*
[插件名称] jQuery emSlide 响应式幻灯片
[描 述] 基于jQuery类库,实现了不使用flash也同样可以在
页面上展示图片的效果,支持数字导航,纵向滑动和横向滑动,自动滚动和连续滑动
可设置滑动速度、是否自动、停顿间隔,自定义容器高度和宽度,支持Jquery的easing效果
(更多效果需要easing插件的支持,默认是swing)
[使用方法]
$(document).ready(function() {
$("#imgs_01").emSlide({namespace:"jqis_box_01",title:1,speed:1000,height:250});
});
namespace:'emSlide001',//命名空间名称,如有多个调用,请使用不同的名称
title:1,//是否显示标题 0 不显示 1内部标题 2 外部标题
control: 1, //是否显示数字导航 1 显示,0 关闭
vertical: 1, //呈现方式 0 直接 ,1 上下滑动, 2左右滑动
speed: 800, //滑动速度
autoTime: 2500, //自动切换的间隔时间,小于1000(1秒)将关闭自动切换
easing: "swing", //easing效果,默认swing,noteasing 标示不使用任何效果,更多效果需要easing插件支持
height: 0, //固定高度(宽度依据样式相应)
width: 0//固定宽度(高度依据样式相应)
*/
(function($) {
$.fn.emSlide = function(options) {
var options = $.extend({}, $.fn.emSlide.defaults, options);
options.autoTime=parseInt(options.autoTime);
var $emSlideObj=$(this);
var $itemObj=$emSlideObj.find('.jq-emslide-item');
var $item =[];
var item_on_index =0;
$emSlideObj.find('.jq-emslide-item a').each(function (i){
$(this).attr('data-index',i);
$item[i]=$(this);
});
if($item.length<1) return;
if(options.title==1){
$emSlideObj.find('.jq-emslide-box').append("
';
}else{
var html = '
';
}
$.each($item,function(i) {
if(i==item_on_index){
html += '
';
}else{
html += '
';
}
});
html += '
';
if(options.vertical==0 || options.vertical==2){
if($emSlideObj.hasClass('jq-emslide-full')){
html += '
';
html += '
';
}else{
html += '
';
html += '
';
}
}else if(options.vertical==1){
if($emSlideObj.hasClass('jq-emslide-full')){
html += '
';
if(options.title==1){
html += '
';
}else{
html += '
';
}
}else{
html += '
';
if(options.title==1){
html += '
';
}else{
html += '
';
}
}
}
$emSlideObj.find('.jq-emslide-box').append(html);
$emSlideObj.find('.jq-emslide-control a').each(function(){
$control[$(this).attr('data-index')]=$(this);
});
//添加数字控制器动作
$emSlideObj.find('.jq-emslide-control a').hover(function(){
switchShow($(this).attr('data-index'));
});
//添加左右控制器动作
var $control_left=$emSlideObj.find('.jq-emslide-control-left');
var $control_right=$emSlideObj.find('.jq-emslide-control-right');
$emSlideObj.find('.jq-emslide-box').hover(function(){
$control_left.show();
$control_right.show();
},function(){
$control_left.hide();
$control_right.hide();
});
$control_left.hover(function(){
$control_left.stop().animate({opacity:0.7});
},function(){
$control_left.stop().animate({opacity:0.3});
}).click(function(){
var i=item_on_index-1>=0?item_on_index-1:$item.length-1;
switchShow(i);
});
$control_right.hover(function(){
$control_right.stop().animate({opacity:0.7});
},function(){
$control_right.stop().animate({opacity:0.3});
}).click(function(){
var i=item_on_index+1>=$item.length?0:item_on_index+1;
switchShow(i);
});
}
//由于 jQuery resize 在IE6/7下有Bug
//在这里如果加载了jQuery wresize 插件则优先使用
var plugin_wresize = typeof $('body').wresize=='function'?1:0;
if(plugin_wresize){
$(window).wresize(function(){
setStyle();
});
}else{
$(window).resize(function(){
setStyle();
});
}
//样式及初始化
setStyle();
//启动定时器
//由于 setTimeout 在IE6下有Bug
//在这里如果加载了jQuery timers 插件则优先使用
var plugin_timers = typeof $('body').everyTime=='function'?1:0;
var timeout;
addAutoTime();
function addAutoTime(){
if(options.autoTime<1000){
return;
}
var i=item_on_index+1>=$item.length?0:item_on_index+1;
if(plugin_timers){
$('body').everyTime(options.autoTime,options.namespace,function(){
switchShow(i);
});
}else{
timeout= setTimeout(function() {
switchShow(i);
}, options.autoTime);
}
}
function removeAutoTime(){
if(options.autoTime<1000){
return;
}
if(plugin_timers){
$('body').stopTime(options.namespace);
}else{
clearTimeout(timeout);
}
}
function setStyle(){
if(options.vertical==0){//直接呈现
for(i in $item){
if(i==item_on_index){
$item[i].show();
}else{
$item[i].hide();
}
}
}else if(options.vertical==1){//上下滑动
for(i in $item){
$item[i].show();
$item[i].css({'clear':'both','float':'none','width':'100%'});
}
var _top=item_on_index==0?0:'-'+(item_on_index*$item[0].height());
$itemObj.css({'position':'absolute','width':'100%','left':0,'top':_top});
}else if(options.vertical==2){//左右滑动
var _width=$emSlideObj.find('.jq-emslide-box').width();
for(i in $item){
$item[i].css({'clear':'none','float':'left','width':_width});
}
var _left=item_on_index==0?0:'-'+(item_on_index*_width);
$itemObj.css({'position':'absolute','width':_width*$item.length,'left':_left,'top':0});
}
}
function switchShow(index){
if(item_on_index==index)return;
removeAutoTime();
if(options.control==1){
$control[item_on_index].removeClass('on');
$control[index].addClass('on');
}
if(options.title==1){
$titleObj.empty().text($item[index].attr('title'));
}else if(options.title==2){
$titleObj.empty().text($item[index].attr('title'));
$titleObj.attr('href',$item[index].attr('href'));
}
if(options.vertical==0){//直接呈现
$item[item_on_index].fadeOut(options.speed/2);
$item[index].fadeIn(options.speed/2);
}else if(options.vertical==1){//上下滑动
var _top=index==0?0:'-'+(index*$item[0].height())+'px';
if(options.easing!='noteasing'){
$itemObj.stop().animate(
{'top':_top},
options.speed,
options.easing
);
}else{
$itemObj.stop().animate(
{'top':_top},
options.speed
);
}
}else if(options.vertical==2){//左右滑动
var _left=index==0?0:'-'+(index*$item[0].width())+'px';
if(options.easing!='noteasing'){
$itemObj.stop().animate(
{'left':_left},
options.speed,
options.easing
);
}else{
$itemObj.stop().animate(
{'left':_left},
options.speed
);
}
}
item_on_index=index;
addAutoTime();
}
};
//默认值
$.fn.emSlide.defaults = {
namespace:'emSlide001',//需要定义尺寸的容器ID或CLASS
title:1,//是否显示标题
control: 1, //是否显示数字导航
vertical: 1, //纵向还是横向滑动
speed: 800, //滑动速度
autoTime: 2500, //自动切换的间隔时间,小于1000(1秒)将关闭自动切换
easing: "swing", //easing效果,默认swing,noteasing 标示不使用任何效果, 更多效果需要easing插件支持
height: 0, //容器高度,不设置自动获取ITEM高度
width: 0//容器宽度,不设置自动获取ITEM宽度
};
})(jQuery);