嘗試jquery插件的開發

今天，嘗試了一下jquery插件的開發，先看效果圖：

就是鼠標點擊下面三張縮略圖的時候，顯示大圖和文字。

$(document).ready(function() {
$('#slider1').freySlider({
timeOut: 4000
});
});

仿照s3Dlider插件的寫法，呵呵。

送上源代碼。

插件源代碼下載

我寫的frey.js的源碼

/* ------------------------------------------------------------------------
freySlider
Developped By: yaoshuguo
------------------------------------------------------------------------- */
(function($){

$.fn.freySlider = function(vars) {
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var timeOutFn = null;
var items = $("#slider1Content .slider1Image");
var itemsSpan = $("#slider1Content .slider1Image span");
var its = $(".dbxt img");
var tid = 0;
var cid = its.length-1;
//$(tips).text(cid);
its.each(function(i) {
$(its[i]).mouseover(function() {
stopSlider();
if(i==0){
$(items[cid]).hide();
$(itemsSpan[cid]).hide();
}else{
$(items[i-1]).hide();
$(itemsSpan[i-1]).hide();
}
$(items[i]).show();
$(itemsSpan[i]).show();
});
$(its[i]).mouseout(function() {
tip = i;
autoSlider();
});
});

var autoSlider = function() {
if(tid==0){
$(itemsSpan[cid]).hide();
$(items[cid]).hide();
}else{
$(itemsSpan[tid-1]).hide();
$(items[tid-1]).hide();
}
$(items[tid]).show();
$(itemsSpan[tid]).show();
tid++;
if(tid>=cid)tid = 0;
timeOutFn = setTimeout(autoSlider,timeOut);
}

var stopSlider = function() {
clearTimeout(timeOutFn);
}
autoSlider();
};

})(jQuery);

感謝jquery插件s3Slider的作者，正是讀了他的代碼給了我靈感。

posted on 2012-03-09 14:55 步青云 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/frey/archive/2012/03/09/2387628.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的尝试jquery插件的开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。