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()方法;停止定時任務

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾 宏發彩票游戏 街机捕鱼ol下载送20000 qq上炒货币赚钱吗 盈宝彩网址 做小姐哪个地方最赚钱 老百姓种什么赚钱多 学那门传承手艺最赚钱 三星彩票安卓 滴滴跑专车赚钱不赚钱 开连锁肉店赚钱吗 千炮彩金捕鱼免费安装 德州麻将单机 怎么利用人的资源赚钱 百度地图纠正靠赚钱吗 状元彩票游戏 一个人的心思要放在赚钱