jQuery.hhNewSilder 滚动图片插件
/**
* jQuery.hhNewSilder 滚动图片插件
* User: huanhuan
* QQ: 651471385
* Email: th.wanghuan@gmail.com
* 微博: huanhuan的天使
* Date: 13-7-4
* Time: 下午5:20
* Dependence jquery-1.7.2.min.js
*/
$(function(){
$.fn.hhNewSilder = function(infor){
var defaults = {
autoTimer:6000,
speed:1000,
picBox:'thDSpic',
circleBox:'thDSnumber',
leftEle:'thDSprev',
rightEle:'thDSnext',
preLoadSrc:'images/loading.gif',
autoPlay:true,
imgBox:function(){return GetBox();},
imgBoxSize:function(){return GetSize();}
};
var option = $.extend(defaults, infor || {}),
circleLi = option.imgBox().circleLi,
imgList = option.imgBox().imgList,
imgSize = option.imgBoxSize(),
_thisAll = $(this),
n = 1;
$('.'+option.circleBox).find('li:eq(0)').addClass('thScrusor');
//拿到li
function GetBox(){
this.circleLi = $('.'+option.circleBox,_thisAll).find("li");
this.imgList =$('.'+option.picBox,_thisAll).find("li");
return this;
}
//设置宽度、高度
function GetSize(){
this.w = $('.'+option.picBox,_thisAll).width();
this.h = $('.'+option.picBox,_thisAll).height();
return this;
}
var s = GetSize;
s.w
//设置ul的宽度
$('.'+option.picBox, _thisAll).find('ul').css({
width : imgList.width() * imgList.length
});
/*function getSiz(){
var w = $('.'+option.picBox,_thisAll).width();
var h = $('.'+option.picBox,_thisAll).height();
return { w: w, h: h}
}
var size = getSiz();
size.w*/
return this.each(function(){
//初始化时给li添加class="show"
imgList.eq(0).addClass('show').css({'left':0}).siblings().removeClass('show').css({'left':imgSize.w});
function Play(){
if(imgList.is(':animated')) return; //如果在运动则返回
var _index = $('.'+option.picBox).find('li.show').index(); //得到当前的
_index = _index == "-1" ? 0 : _index;
if(imgList.eq(n).hasClass('show')) return; //如果有show class则返回
circleLi.eq(n).addClass('thScrusor').siblings().removeClass('thScrusor'); //圆点
imgList.slice(_index,_index+1).animate({'left':-imgSize.w},option.speed,function(){
$(this).css({'left':imgSize.w});
}).removeClass('show');
imgList.eq(n).animate({left:0},option.speed).addClass('show'); //当前li添加show属性
//追加
if(imgList.length-1>n){
n++;
}else{
n=0;
}
}
_init = function(){
var x=null;
$('.'+option.picBox).find('li:gt(0)').css('left',imgSize.w);
if(option.autoPlay) x=setInterval(Play,option.autoTimer);
circleLi.click(function(){
n = $(this).index();
Play();
if(option.autoPlay){
clearInterval(x);
x=setInterval(Play,option.autoTimer);
}
});
//左右按钮绑定事件
$('.'+option.leftEle+',.'+option.rightEle).css({'opacity':'0.3'}).live({
mouseover:function(){
$(this).stop(true,false).animate({'opacity':'1'},400);
},
mouseout:function(){
$(this).stop(true,false).animate({'opacity':'0.3'},400);
},
click:function(){
var _index = $('.'+option.picBox).find('li.show').index();
if($(this).attr('class')==option.leftEle){
n = _index==0?(imgList.length-1):_index-1;
}else{
n = _index==(imgList.length-1)?0:_index+1;
}
Play();
if(option.autoPlay){
clearInterval(x);
x=setInterval(Play,option.autoTimer);
}
}
});
}
return _init();
});
}
});
