/* 
*   Document       : jquery.smallslider.js 
*   Created on     : 2010-7-3, 11:56:24 
*   Author         : smallchicken 
*   Description    : JQuery plugin for switch images 
*/  
;(function($) {  
$.fn.smallslider=function(options){  
var defaults={  
Time:3000,              // 切换时间间隔，单位毫秒，1秒=1000毫秒  
ButtonImage:'',         // 按钮的背景图  
ButtonImageOn:'',       // 当播放到某按钮时，按钮的背景图  
ShowText:true,          // 是否显示标题，如果不显示，则只显示按钮  
TextLink:true,          //是否给显示的标题加上链接，如果为false，则只显示标题，标题不可单击，链接的地址自动和当前播放到的图片  
  
//地址一致        
AutoStart:true,         // 是否自动开始播放  
SwitchMode:'Click',     // 图片切换的方式，Click为单击切换，Hover为鼠标移动到按钮上时切换  
SwitchEffect:'fadeOut', // 切换特效,fadeOut,fadeIn, slideUp,slideDown,none,  
SwitchTime:300,         // 切换时间，单位毫秒，1秒=1000毫秒  
Position:'RightBottom', // 按钮位置表示，共有四个值：LeftTop，LeftBottom,RightTop,RightBottom     
OffsetX:10,             // 水平方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px  
OffsetY:4,              // 竖直方向上的按钮偏移位置，指向中心部移动多少，这里是数值，不加px  
ButtonSpace:4           // 按钮之间的间隔 单位为像素，但不要加px  
};//定义defaultsshu对象的属性值  
var opts=$.extend(defaults,options);//把defaults的属性拓展给options，传递过来的值替换原有的值  
var $this=$(this);//获取fn对象的当前的指针  
var slider=new Array();//创建一个slider数组  
var ButtonBgColor='';//照片按钮颜色  
var ButtonBgColorOn ='';//当前照片按钮颜色  
//以下是根据类似fn的这样的元素的个数做选择,（也就是说页面中可以有多个滑动的fn对象，但本例只有一个）若元素不是零个，就遍历整个  fn，并有回调函数init(),createbuttons(),onimage()等；否则什么也不做  
  
if($this.length>0){   
$.each($this,function(){  
Init(this);  
CreateButtons(this,0);  
if(opts.AutoStart) StartSlider(this,0);  
onImage(this);//鼠标移到滑动的图片上执行此函数  
});  
}  
  
//鼠标悬停在某个图片时，调用的函数  
//先停止图片滑动通过调用stopslider(),失去焦点时再调用startslider()继续滑动  
function onImage(obj){  
$(obj).find('img').hover(function(){  
StopSlider(obj);  
}, function(){  
var i= $(obj).find('li').index( $(obj).find('.current-li'));  
StartSlider(obj,i+1);  
});  
}  
  
//滑动函数Slide  
//obj：滑动对象，index：当前显示图片的li的索引  
function Slide(obj,index){  
StopSlider(obj); // 先清除掉以前的setTimeOut;  
// index表示当前停止在哪个元素上上面，其上一张为prev，后一个，也就是将要显示的为next  
var listArr = $(obj).find('li');//所有的obj中的li构成一个对象ListArr，即所有的滑动的图片  
var count=listArr.length;//就是返回obj中所有的的li的个数，即所有滑动的图片的数目  
if(index > count-1) index = 0;//索引是从0开始，到count-1结束的  
// index 可能会传入-1 值，表示当前需要切换到状态0，即第一张图片，那么next正好是0  
// 所以这里需要先经过运算，得出next，然后再进行限定0 - count-1之间  
var prev= index - 1 <= -1 ? count-1 : index - 1  ;  
var next= index + 1 < count ? index + 1 : 0;  
  
if(index < 0) index = 0;  
if(next <0 ) next = 0 ;  
  
listArr.hide();//先隐藏所有li  
listArr.eq(index).show(); //让当前的li显示  
//下面是选择显示当前li的模式：切换的时间SwitchTime；再就是有的还调用回调函数  
//例如fadeOut(speed, [callback])，callback是回调函数，即显示下一个li  
switch( opts.SwitchEffect){  
case 'fadeOut':  
listArr.eq(index).fadeOut(opts.SwitchTime,function(){listArr.eq(next).show();});  
break;  
case 'fadeIn':  
listArr.eq(index).hide();  
listArr.eq(next).fadeIn(opts.SwitchTime);  
break;  
case 'slideUp':  
listArr.eq(index).slideUp(opts.SwitchTime,function(){listArr.hide();listArr.eq(next).show();});  
break;  
case 'slideDown':  
listArr.eq(index).hide();  
listArr.eq(next).slideDown(opts.SwitchTime,function(){listArr.hide();listArr.eq(next).show();});  
break;  
case 'none':  
listArr.eq(index).hide();  
listArr.eq(next).show();  
break;  
default:  
listArr.eq(index).hide();  
listArr.eq(next).show();  
break;  
}  
  
// 切换表示当前元素  
$(obj).find('li').removeClass('current-li');//删除的当前li的CSS类名:current-li  
$(obj).find('li').eq(next).addClass('current-li');//为下一个li添加CSS类名：current-li  
$(obj).find('span').removeClass('current-btn');  
$(obj).find('span').eq(next).addClass('current-btn');  
  
// 切换背景图片  
if(opts.ButtonImageOn!=''){  
 if(opts.ButtonImage!=''){  
    $(obj).find('span').css({background:'transparent url('+opts.ButtonImage+') no-repeat 0 0'});  
 }else{  
    $(obj).find('span').css({backgroundColor:ButtonBgColor,backgroundImage:'',borderWidth:'1px'});  
 }  
$(obj).find('span.current-btn').css({background:'transparent url('+opts.ButtonImageOn+') no-repeat 0 0',borderWidth:0});  
}  
//切换标题  
  
var tit = $(obj).find('img').eq(next).attr('alt');  
if(opts.TextLink){  
tit = '<a href="'+$(obj).find('img').eq(next).parent('a').attr('href')+'" mce_href="'+$(obj).find('img').eq(next).parent('a').attr('href')+'">'+ tit+'</a>';  
}  
$(obj).find('h3').html(tit);  
++index;  
index = index > count -1 ? 0 : index;  
StartSlider(obj,index);  
}  
//Slide函数结束  
  
//以下是创建切换按钮  
function CreateButtons(obj,index)  
{  
var listArr = $(obj).find('li');  
var count=listArr.length;  
var buttons='';  
for(var i=1; i <= count; i++ ){  
buttons += '<span>'+i+'</span>';  
}  
//侦测按钮位置，共四个选项  
var left=0,right=0,top =0,bottom=0;  
var style_btns={},style_lays={};  
switch(opts.Position){  
case 'LeftTop':  
left = opts.OffsetX;  
top = opts.OffsetY;  
style_btns={left: left + 'px' , top: top+'px'};  
style_lays={left:0,top:0,textAlign:'right'};  
break;  
case 'RightTop':  
right = opts.OffsetX;  
top = opts.OffsetY;  
style_btns={right: right + 'px' , top: top+'px'};  
style_lays={left:0,top:0,textAlign:'left'};  
break;  
case 'RightBottom':  
right = opts.OffsetX;  
bottom = opts.OffsetY;  
style_btns={right: right + 'px' ,bottom: bottom+'px'};  
style_lays={left:0,bottom:0,textAlign:'left'};  
break;  
case 'LeftBottom':  
left = opts.OffsetX;  
bottom = opts.OffsetY;  
style_btns={left: left + 'px' ,bottom: bottom+'px'};  
style_lays={left:0,bottom:0,textAlign:'right'};  
break;  
}  
//switch结束，作用：确定滑动图片按钮的位置  
//将切换按钮添加到div中,并添加到$obj中  
//若标题带链接，则为标题添加链接  
buttons ='<div class="smallslider-btns">' + buttons + '</div>';  
$(buttons).css(style_btns).appendTo($(obj));  
if(opts.ShowText){  
$('<div class="smallslider-lay"></div>').css(style_lays).appendTo($(obj));  
var tit= $(obj).find('img').eq(index).attr('alt');  
if(opts.TextLink){  
tit = '<a href="'+$(obj).find('img').eq(index).parent('a').attr('href')+'" mce_href="'+$(obj).find('img').eq(index).parent('a').attr('href')+'">'+ tit+'</a>';  
}  
$('<h3></h3>').html(tit).css(style_lays).appendTo($(obj));  
}  
//为span添加，移除样式  
$(obj).find('span:not(:first)').css({marginLeft:opts.ButtonSpace+'px'});  
$(obj).find('span').removeClass('current-btn');  
$(obj).find('span').eq(index).addClass('current-btn');  
  
//如果背景图片的设置不是空的，则添加背景图片样式  
if(opts.ButtonImage!=''){  
$(obj).find('span').css({border:0,background:'transparent url('+opts.ButtonImage+') no-repeat 0 0'});  
}  
  
//如果当前按钮的背景图不是空的  
if(opts.ButtonImageOn!=''){  
if(opts.ButtonImage!=''){  
$(obj).find('span').css({background:'transparent url('+opts.ButtonImage+') no-repeat 0 0'});  
}else{  
$(obj).find('span').css({backgroundColor:ButtonBgColor,backgroundImage:'',borderWidth:'1px'});  
}  
$(obj).find('span.current-btn').css({background:'transparent url('+opts.ButtonImageOn+') no-repeat 0 0',borderWidth:0});  
}  
//图片切换模式是单击,悬停的效果  
if(opts.SwitchMode=='Click'|| opts.SwitchMode=='Hover'){  
$(obj).find('span').click(function(){  
var ix = $(obj).find('span').index($(this));  
Slide(obj,ix-1);   
//传入ix-1表示当前是他前面一个，则在调用函数后，就会自然的切换到下一张图片，正好是ix  
});  
}  
ButtonBgColor   = $(obj).find('span:not(.current-btn)').css('backgroundColor');  
ButtonBgColorOn = $(obj).find('span.current-btn').css('backgroundColor');  
}  
//CreateButtons函数结束  
  
//初始化$obj,显示第一个li内容，其他隠藏  
function Init(obj){  
var listArr = $(obj).find('li');  
listArr.hide();  
listArr.eq(0).show();  
}  
  
//StartSlider与Slide连个函数嵌套调用  
function StartSlider(obj,index){  
// 由第几个序号开始 初始为-1  
var st =setTimeout(function(){  
Slide(obj,index);  
},opts.Time);  //定义一个st变量，存储setTimeout的返回ID，以便调用clearTimeout()使用  
var i= $this.index(obj);//定义i，保存当前的滑动对象（因为这个程序可使用多个滑动对象obj）  
slider[i]=st;//调用滑动函数使obj对象有滑动动作，并赋予其唯一的setTimeout ID  
}  
//startslider函数结束  
  
function StopSlider(obj){  
var i= $this.index(obj);  
clearTimeout(slider[i]);//停止动画  
slider[i]=0;  
}  
//stopslider函数结束  
  
return this.each(function(){  
this.AccessStop=function(){  
$.each($this,function(){  
StopSlider($this);  
});  
}  
});  
  

}  
  
})(jQuery);      
//function(options)结束  
//全局函数结束