jquery插件实例处女座图片轮播
本文导语: jquery插件实例处女座图片轮播 好久没写博客了，变得好懒呀，无地自容。最近一直在学sass和jq插件的写法，照猫画虎的谢了一个jq的插件，也算是第一次真正称得上插件的插件。 1，jquery代码 代码示例: (function($) { $.fn...
jquery插件实例处女座图片轮播
好久没写博客了，变得好懒呀，无地自容。最近一直在学sass和jq插件的写法，照猫画虎的谢了一个jq的插件，也算是第一次真正称得上插件的插件。
1，jquery代码
(function($) {
$.fn.carousel = function(options) {
if($(this).length==0)return false;
var opts = $.extend({},$.fn.carousel.defaults,options);
function Slide(o){
this.o = o;
this.box = o.find(opts['imgbox']);
this.cirEle = this.box.find(opts['cirEle'])
this.nav = o.find(opts['slideNav']);
this.rightAr = o.find(opts['rightAr']);
this.leftAr = o.find(opts['leftAr']);
this.et = opts['eventType'];
this.autoPlay = opts['autoPlay'];
this.navClass = opts['navClass'];
this.speed = opts['speed']
this.timer = null;
this.len = this.cirEle.length;
this.cirNavEle = null;
this.onOff = true;
this.activeIndex = 0;
this.iNow = 0;
this.boxWidth = this.box.outerWidth()
}
Slide.prototype.init = function(){
var _this = this;
_this.createNav().togglePage();
this.leftAr.on('click',function(){
_this.play(1);
})
this.rightAr.on('click',function(){
_this.play();
})
if(this.autoPlay){
this.stop();
this.timer = setInterval(function(){
_this.play();
},this.speed[1]);
this.o.hover(function(){
_this.stop();
},function(){
_this.timer = setInterval(function(){
_this.play();
},_this.speed[1])
})
}
}
Slide.prototype.createNav = function(){
var _this = this;
var arr = [];
$.each(_this.cirEle,function(i,n){
if(i == 0){
arr.push(''+ (i+1) +'');
}else{
arr.push(''+ (i+1) +'');
_this.cirEle.eq(i).css({'left':_this.boxWidth});
}
});
_this.nav.html(arr.join(''));
this.cirNavEle = _this.nav.find('span');
return this;
}
Slide.prototype.togglePage = function(){
var _this = this;
this.cirNavEle.on(_this.et,function(){
if(_this.onOff){
_this.onOff = false;
_this.activeIndex = $(this).index();
$(this).addClass(_this.navClass).siblings().removeClass(_this.navClass);
if(_this.activeIndex > _this.iNow){
_this.toggleRight();
}else if( _this.activeIndex < _this.iNow ){
_this.toggleLeft();
}
_this.cirEle.eq(_this.activeIndex).animate({'left':0},_this.speed[0],function(){
_this.onOff = true;
$(this).css({'z-index':1}).siblings().css({'z-index':0})
})
_this.iNow = _this.activeIndex;
}
})
return this;
}
Slide.prototype.toggleLeft= function(){
var _this = this;
_this.cirEle.eq(_this.activeIndex).css({'left':-_this.boxWidth})
_this.cirEle.eq(_this.iNow).animate({'left':_this.boxWidth},_this.speed[0])
}
Slide.prototype.toggleRight= function(){
var _this = this;
_this.cirEle.eq(_this.activeIndex).css({'left':_this.boxWidth})
_this.cirEle.eq(_this.iNow).animate({'left':-_this.boxWidth},_this.speed[0])
}
Slide.prototype.play = function(dir){
var _this = this;
if(_this.onOff){
_this.onOff = false;
if(!dir){
_this.activeIndex++;
_this.activeIndex %= _this.len;
_this.toggleRight();
}else{
_this.activeIndex--;
if(_this.activeIndex
您可能感兴趣的文章:
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。