超服貼!前端必修的項目練習之路

哇啦啦~大家好!
剛開始前端之路的老鐵們,學了一定基礎總是想找找項目來練練手。但是要麼項目太大,要麼項目代碼太多一看頭就大了,無從下手。爲了大家更好的學習,提升前端學習興趣。附上一個小項目練練手。千里之行,始於敲代碼。每天一練,每次都有新收穫 啦啦啦~。這裏寫圖片描述
這是本次的項目成果圖!如果大家CSS學的好可以達到更優美的界面。
佈局和樣式不是我們總點說的地方直接附上代碼圖片
這是HTML頁面
這是CSS
我們總點來說說實現這個功能的技術 主要使用到完美的jQuery jQuery很美 很簡 很易 值得前端的每一位學習者去體會 話不多說 正式開始。
第一步 實現上一張,下一張按鈕功能
這裏寫圖片描述
1.定義一個圖片的名稱(我用的是數字1,2,3,4)
定義全局變量 timer 下面定時器會用到
2.上一張,下一張按鈕
通過判斷 進入條件語句 通過attr()來修改圖片的index 就實現了圖片的變換 當到達最後一張 通過else語句 回到第一張
第二步 設置定時器
開啓定時器 關閉定時器
這裏寫圖片描述
1.首先封裝star函數
當自動播放到第5張 自動調回第1張
2.在調用setInterval(函數名,時間間隔) 毫秒單位
關於JS的定時器在jQuery中 函數名調用不能使用引號和括號
3.停止(清除)定時器
timer爲全局變量,纔會爲它分配內存 才能被調用
—————————我是分界線—————————–
不積跬步,和以至千里 雖然是簡單小實例,還是會有很多細節值得注意 慢慢積累 敲鍵盤 頭腦裏的實例多了 就業的能力就強了 工作好找了

    //我們的宗旨是服務大家,專治傻瓜。(有註釋不可見)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章