/* [插件名称] 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("
"+$item[item_on_index].attr('title')+"
"); var $titleObj=$emSlideObj.find('.jq-emslide-in-title b'); }else if(options.title==2){ $emSlideObj.append("
"+$item[item_on_index].attr('title')+"
"); var $titleObj=$emSlideObj.find('.jq-emslide-out-title a'); } if(options.control==1){ var $control=[]; if(options.title==1){ var html = '
'; }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);