JQuery制作banner全屏特效切換原理

2016-10-17 1387 0 編輯:深色多郎 來源:網站程序書籍

最近在學習jquery,發現jquery上手比javascript容易許多,因為有著良好的文檔和幫助手冊,如果遇到一些問題可以借助文檔來解決。初步接觸學習jquery,我發現學習jquery主要是學會如何使用內置的方法。

今天深色多郎就跟大家一起分享下,用jquery寫的一個banner全屏特效切換的案例,以及制作它運用了哪些jquery內置方法。

banner全屏切換

思路:

注:這里說的是JS中的思路,至于布局的話,可以下載源碼自己研究。

第一步、讓切換按鈕動起來

上圖中有4個小切換按鈕,當鼠標每滑動到一個切換按鈕的位置,則相對應的添加一個樣式。(一個橘黃色的小圓點)

第二步、讓圖片動起來

當滑動每個相對應切換按鈕時,我們的背景圖片也需要隨著切換。

第三步、讓它自動切換

當鼠標沒有滑動到切換按鈕時,則讓它自動切換,這里需定義一個定時任務。(setInterval)

jquery代碼

根據上圖jquery代碼中,下面總結了此次特效所用到的方法:

eq()方法;尋找當前索引

mouseover()方法;當鼠標滑動到元素上方,則發生該事件

mouseout()方法;當鼠標離開時,則發生該事件

index()方法;查找索引值

addClass()方法;添加樣式

sibling()方法;獲取當前元素的同輩其他元素

fadeIn()方法;淡入

fadeOut()方法;淡出

以及javascript中的setInterval()方法;定義一個定時任務。和clearInterval()方法;停止定時任務

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾