插件原文位址：http://playground.mobily.pl/jquery/mobily-slider.html
簡單的說這個圖檔滾動的效果和淘寶首頁上的效果是一樣的
插件源代碼學習：
/* ==========================================================
* MobilySlider
* date: 20.1.2010
* author: Marcin Dziewulski
* last update: 02.02.2011
* web: http://www.mobily.pl or http://playground.mobily.pl
* email: [email protected]
* Free to use under the MIT license.
* ========================================================== */
(function($) {
$.fn.mobilyslider = function(options) {
var defaults = {
//容器的class
content: ".sliderContent",
//容器孩子的标簽
children: "div",
//圖檔過度的方式有三種 水準向右滾動：horizontal，垂直向下：vertical，淡隐淡顯： fade
transition: "horizontal",
//播放一張時的時間
animationSpeed: 300,
//是否自動滾動
autoplay: false,
//自動滾動的速度，也就說時間間隔，多長時間播放下一張
autoplaySpeed: 3000,
//滑鼠懸停後停止滾動
pauseOnHover: false,
//是否顯示分頁
bullets: true,
//是否有左右箭頭
arrows: true,
//未觸發是是否顯示箭頭
arrowsHide: true,
//向按鈕的樣式
prev: "prev",
//向後按鈕的樣式
next: "next",
//每一個動畫開始時要做的事
animationStart: function() {},
//每一個動畫結束時要做的事
animationComplete: function() {}
};
var sets = $.extend({},
defaults, options);
return this.each(function() {
// $t = $('div.slider');
var $t = $(this),
item = $t.children(sets.content).children(sets.children),
//圖檔個數
l = item.length - 1,
//圖檔寬度
w = item.width(),
//圖檔高度
h = item.height(),
step = 0,
play,
bullets,
arrows,
z,
active,
bullet,
//處理一次圖檔過渡沒有完成，而又多次觸發事件
loadOver = true;
var slider = {
init: function() {
//初始化要顯示的圖檔
slider.data();
//是否顯示分頁按鈕
if (sets.bullets) {
slider.bullets.create();
}
//是否顯示左右箭頭
if (sets.arrows) {
slider.arrows.create();
}
//是否自動播放
console.log( sets.autoplay );
if (sets.autoplay) {
slider.autoplay();
}
//注冊事件
slider.triggers();
},
data: function() {
//通過z-index值來顯示層次關系，這個真實夠巧妙的。
//顯示方式：水準向右滾動，垂直向下滾動
item.each(function(i) {
$(this).css("z-index", -(i - l))
});
//過度方式：淡隐淡顯
if (sets.transition == "fade") {
item.hide().eq(0).show()
}
},
zindex: {
prev: function() {
step == l ? item.eq(0).css("z-index", l + 3) : item.css("z-index", l + 1);
item.eq(step).css("z-index", l + 4).next(item).css("z-index", l + 2);
},
next: function() {
item.css("z-index", l + 1).eq(step).css("z-index", l + 3).prev(item).css("z-index", l + 2);
},
bullets: function() {
item.css("z-index", l + 1).eq(active).css("z-index", l + 2);
item.eq(step).css("z-index", l + 3);
},
trigger: function() {
if (z == 1) {
slider.zindex.next();
} else {
if (z == -1) {
slider.zindex.prev();
} else {
if (z == 0) {
slider.zindex.bullets();
}
}
}
}
},
slide: {
left: function(sign) {
loadOver = false;
//動畫變化前要執行的函數
sets.animationStart.call(this);
//這裡把代碼的就夠變了一下，這樣看着舒服多了
item.eq(step)
.animate({ left: sign + "=" + w },sets.animationSpeed,function(){
loadOver = true;
slider.zindex.trigger()
})
.animate({ left : 0 },sets.animationSpeed + 200,function() {
sets.animationComplete.call(this);
});
},
top: function(sign) {
loadOver = false;
//同上
sets.animationStart.call(this);
item.eq(step)
.animate({ top: sign + "=" + h},sets.animationSpeed,function() {
loadOver = true;
slider.zindex.trigger();
})
.animate({top: 0},sets.animationSpeed + 200,function() {
sets.animationComplete.call(this)
});
},
fade: function() {
loadOver = false;
sets.animationStart.call(this);
item.fadeOut(sets.animationSpeed).eq(step).fadeIn(sets.animationSpeed,function() {
loadOver = true;
sets.animationComplete.call(this)
})
}
},
animation: {
previous: function() {
step == 0 ? step = l: step--;
z = -1;
switch (sets.transition) {
case "horizontal":
slider.slide.left("-");
break;
case "vertical":
slider.slide.top("+");
break;
case "fade":
slider.slide.fade();
break
}
},
next: function() {
step == l ? step = 0: step++;
z = 1;
switch (sets.transition) {
case "horizontal":
slider.slide.left("+");
break;
case "vertical":
slider.slide.top("-");
break;
case "fade":
slider.slide.fade();
break
}
}
},
autoplay: function() {
play = setInterval(function() {
slider.animation.next();
if (sets.bullets) {
setTimeout(function() {
slider.bullets.update()
},
sets.animationSpeed + 300)
}
},
sets.autoplaySpeed );
},
pause: function() {
clearInterval(play);
},
//分頁按鈕
bullets: {
create: function() {
$t.append($("<div />").addClass("sliderBullets"));
bullets = $t.find(".sliderBullets");
for (i = 0; i <= l; i++) {
bullets.append($("<a />").attr({
href: "#",
//自定義屬性
rel: i
}).text(i));
}
},
trigger: function() {
//找到a
bullet = bullets.find("a");
//第一個被激活添加激活樣式
bullet.eq(0).addClass("active");
//綁事件
bullet.click(function() {
//判斷上次圖檔過渡是否完成
if(!loadOver){ return false; }
var b = $(this),
rel = b.attr("rel");
active = bullet.filter(".active").attr("rel");
step = rel;
//sign = rel > active ? "+": "-";
sign = rel > active ? "-": "+";
z = 0;
if ( !b.hasClass("active") ) {
switch (sets.transition) {
case "horizontal":
slider.slide.left(sign);
break;
case "vertical":
slider.slide.top(sign);
break;
case "fade":
slider.slide.fade();
break
}
}
bullet.removeClass("active");
b.addClass("active");
//為啥傳回false？
//原因：事件處理函數為了防止預設的事件行為，就傳回false，表示終止符，而傳回true，則表示執行符。其它的函數另當别論。
return false
})
},
update: function() {
bullet.removeClass("active").eq(step).addClass("active")
}
},
arrows: {
create: function() {
$t.append($("<div />").addClass("sliderArrows"));
arrows = $t.find(".sliderArrows");
arrows.append($("<a />").attr("href", "#").addClass(sets.prev).text("Previous"));
arrows.append($("<a />").attr("href", "#").addClass(sets.next).text("Next"))
},
trigger: function() {
arrows.find("." + sets.prev).click(function() {
//判斷上次圖檔過度是否完成
if(!loadOver){ return false; }
slider.animation.previous();
if (sets.bullets) {
slider.bullets.update()
}
return false
});
arrows.find("." + sets.next).click(function() {
//判斷上次圖檔過度是否完成
if(!loadOver){ return false; }
slider.animation.next();
if (sets.bullets) {
slider.bullets.update()
}
return false
});
if (sets.arrowsHide) {
arrows.hide();
$t.hover(function() {
arrows.show()
},
function() {
arrows.hide()
})
}
}
},
triggers: function() {
//注冊事件
if (sets.arrows) {
slider.arrows.trigger();
}
if (sets.bullets) {
slider.bullets.trigger();
}
if (sets.pauseOnHover) {
$t.hover(function() {
slider.pause();
},
function() {
slider.autoplay();
})
}
}
};
slider.init();
})
}
} (jQuery));
/*
* @author [email protected]
* @time 2011-08-05
* 修複bug：一次加載沒有完成，而有點選了多次。導緻圖檔過度不自然。
*
*/
demo在附件中
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)