閒著無聊,用jquery寫了乙個幻燈片效果。
我這人喜歡造輪子,除了jquery這種有強大開發團隊的框架級別js,其實的一些小程式都是盡量自己寫。
一是因為怕出問題了沒人問,二是自己寫的改起來也方便。
效果可參考:
只是上面這個demo用的是supersized,功能比較強大,就是**加密過了,讀起來很困難。
廢話不說,**放上。
css:
img.slider-imageimg.slider-image.visible
js:2014-12-11 追加:
我把這段**加到專案裡,然後專案馬上要結束的時候發現,這貨在ie8下面居然無法正常執行。
原因是fadein,fadeout和window.innerwidth 以及 window.innerheight在ie下無法正常執行。
好吧,一直都是鍾愛chrome,不用ie除錯也是我的原罪。
於是我就在**裡加了乙個判斷,如果是ie的話,就不用fadein,fadeout,
var pic = function (url, parentid,callback)pic.prototype = }}
}var slider = function (opt)
this.imgs = null;
$.extend(this.opt,opt);
this.init();
}slider.prototype =
}));}},
slide: function (slider)
if (img.isloaded)
diplaying.removeclass("visible");
var prepare = $("#" + img.id);
prepare.addclass("visible");
// ie相容
if (jquery.browser.msie) );
} else );
prepare.fadein(1000);
}} else
},start: function () , this.opt.interval);
}}
呼叫的時候,只要執行下面這段**即可:
newslider();
Jquery簡單幻燈片
看了許多jquery的幻燈片,自己也想學著弄乙個,簡單是簡單了一點。不過研究過,還是比較安慰的啦,以下 並未在生產環境中使用過,如果您要在生產環境中使用,請慎重 slide frameid,framewidth,frameheight,ulid,isshow,intervaltime 外層物件id,...
jquery幻燈片 漸變
上為了設計,需要一些幻燈片效果,現在 有很多外掛程式可以使用。想要成為以為牛逼的程式設計師,絕對不允許只會用別人的外掛程式而已,不然你只能是 的搬運工,而不敢做出自己的創新。首先使用jquery做漸變效果,一般使用fadeout fadein 漸入漸出 效果。但是因為fadeout fadein在停...
JQuery的動畫及其幻燈片效果
1.顯示和隱藏hide 和show 對於動畫來說,顯示和隱藏是最基本的效果之一,簡單介紹jquery的顯示和隱藏。點選按鈕,看看效果 本節主要降級和學習jquery的自動顯隱,漸入漸出 飛入飛出。自定義動畫等。1.顯示和隱藏hide 和show 對於動畫來說,顯示和隱藏是最基本的效果之一,本節簡單介...