• <tt id="4ayss"><strong id="4ayss"></strong></tt>
  • <xmp id="4ayss"><menu id="4ayss"></menu><nav id="4ayss"><strong id="4ayss"></strong></nav>
    <nav id="4ayss"><strong id="4ayss"></strong></nav>
  • <nav id="4ayss"></nav>

    卓象程序員 | 哈爾濱IT培訓 | 品質教育,口碑傳承 | 為做出口口相傳,好口碑的教育品牌而奮斗!

    卓象程序員讓每一位學員高薪就業 聯系我們13101507057

    加微信,了解詳情
    您所在的位置:首頁 > 文章 >卓象技術

    「卓象程序員」JQ實現簡單輪播圖效果
    時間: 2019-10-28 09:23:59     來源: 卓象IT實訓基地【原創】

    在學習完JQ以后,大家都會感覺比js原生應用起來更方便、更快捷。課上有一個小練習,是實現簡單的輪播圖效果?,F在我就分享給大家思路與代碼。


    1. 明確jq的作用與使用方法1. 引入JQ庫,課上練習我們使用 jquery-1.8.3.js2. JQ可以進行鏈式編程


    2. 寫好HTML骨骼部分


    3. 給HTML 加上css樣式我們將兩個按鈕調整透明度,用相對定位中的絕對定位,定位在整個圖片的兩側


    標記紅線的位置,一定要用rgba的格式去寫透明度,用opacity 會導致空間中的文字一起變得透明,造成不好的交互感。


    4. JQ部分


    1. 按鈕部分整個方法是比較簡單的,但并不是最好的方法。在JQ初學的時候,是最容易想到的解決方式。那么,我們學習編程不是為了將代碼原封不動的背下來,而是要學習解決問題的方式方法。想好自己要做的事,需要的數據要用到哪些基礎知識,并且努力分析,然后一步一步完成代碼,最后調試。


    2. 自動輪播,并且鼠標移入時停止輪播,移出時繼續輪播效果我們可以用計時器的方法去做,鼠標移入時清除計時器,移出時執行計時器。由于代碼相同部分很多,我將其封裝成函數方便使用。


    先進行計時器正常走程序,然后寫好JQ的鼠標移入移出效果,這樣我們就將這個簡單的輪播圖做好了

    。


    %1. 提示:優化代碼我們在以后的工作中,并不能將圖片的名字改寫成1.jpg的形式,那么我們將如何在進行編寫輪播圖呢?那么這里我給大家一個提示,我們可以將圖片的路徑放入數組,接下來的步驟,請大家思考,該怎么辦呢?


    小作業:我的一段班已經順利的完成了前端的學習,所以這里給大家留一個小的作業。大家可以開動腦筋,將輪播圖的輪轉動畫以滑動的方式進行展現出來。每日分享技術干貨~
    報名卓象免費訓練營課程
    學習最新熱門IT技術找一份自己滿意的高薪工作15天免費學習??!卓象程序員★ 零基礎,隨時體驗★ 免費試聽,滿意后再報名
    ★ 小班授課,學習氛圍濃厚★ 口碑相傳,80%學員來自口碑推薦★ 教學嚴管,闖關式學習保障學習效果★ 公司地點,哈爾濱市東直路123號7樓




    热99re久久精品|天天综合网久久综合免费人成|91久久久久久久精品青草| 亚洲AV无码无一区二区Ⅰ久久|
  • <tt id="4ayss"><strong id="4ayss"></strong></tt>
  • <xmp id="4ayss"><menu id="4ayss"></menu><nav id="4ayss"><strong id="4ayss"></strong></nav>
    <nav id="4ayss"><strong id="4ayss"></strong></nav>
  • <nav id="4ayss"></nav>