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('<span class="cur">'+ (i+1) +'</span>');
}else{
arr.push('<span>'+ (i+1) +'</span>');
_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 <= 0){
_this.activeIndex = 0;
}
_this.toggleLeft();
}
_this.cirEle.eq(_this.activeIndex).animate({'left':0},_this.speed[0],function(){
_this.onOff = true;
_this.iNow = _this.activeIndex;
_this.cirNavEle.eq(_this.activeIndex).addClass(_this.navClass).siblings().removeClass(_this.navClass);
$(this).css({'z-index':1}).siblings().css({'z-index':0})
})
}
}
Slide.prototype.stop = function(){
clearInterval(this.timer);
}
return this.each(function () {
var $this = $(this);
var obj = new Slide($this);
obj.init();
});
};
//默认配置
$.fn.carousel.defaults = {
'imgbox' : '.carousel-box', //滚动元素父容器
'cirEle' : 'li', //滚动元素
'slideNav' : '.carousel-nav', //图片索引菜单
'autoPlay' : true, //是否自动轮播
'rightAr' : '.arR', //下一张
'leftAr' : '.arL', //上一张
'speed':[500,3000], //速度 一张显示出来的时间, 间隔时间
'eventType' : 'click', //切换方式
'navClass' : 'cur' //当前菜单高亮css
}
})(jQuery);
2,html代码部分
3,css代码部分
.area, .area .carousel-box {
width: 310px; }
.area .carousel-nav span, .area .arR, .area .arL {
width: 20px;
height: 20px;
border: 1px solid #666;
text-align: center;
display: inline-block; }
.area .carousel-box ul, .area .carousel-box li {
position: absolute;
left: 0;
top: 0; }
.area {
margin: 50px auto; }
.area .carousel-box {
height: 350px;
overflow: hidden;
position: relative; }
.area .carousel-nav span.cur {
background: #000;
color: #FFF; }
.area .arR, .area .arL {
margin-top: 20px; }
小结,
其实jq插件并不是想象的那么的难,难的还是在实现功能的思路上,写法和平常js也都差不多,上面现在只是简单的实现左右轮播,有时间把上下方向也加上,嘎嘎。
以上通过实例介绍了jquery插件的实现方法,用于实现处女座图片轮播的例子,希望对大家有所帮助。