使用jQuery製作基礎的Web圖片輪播效果_jquery
May 16, 2016 pm 03:04 PM先看一下效果:
就這麼意思,沒截動圖哈~
輪播效果分析:
輪播效果大致可以分為3個部分:輪播圖片(圖片或是包含容器),控制輪播圖顯示的按鈕(向左、向右按鈕,索引按鈕(例如上面效果圖的頂部的數字按鈕) ),每隔一段時間輪流顯示輪播圖片。
輪播圖的顯示:要顯示的輪播圖顯示,不需要顯示的輪播圖隱藏;通常將這些輪播圖片以定位的方式重疊在一起,每次顯示一張輪播圖片。
控制按鈕:滑鼠點擊或移到索引按鈕上面時,顯示對應索引位置的輪播圖;向上、向下按鈕負責控制顯示上一張、下一張輪播圖片。
其它:一般索引按鈕有啟動狀態和未啟動狀態共2種狀態;滑鼠移到輪播圖片上面時應該停止自動輪播,滑鼠離開時開始自動輪播。
輪播效果實現筆記:
jquery提供了豐富的選擇器以及用來挑選元素的方法,這極大的簡化了我們的開發,例如$(".slider-item").filter(".slider-item-selected")選擇了當前處於啟動狀態的索引按鈕。
兩張輪播圖的切換顯示效果是透過jquery的fadeOut()和fadeIn()方法來實現的,具體的使用參考jquery的api;
CSS透明背景的實作: background: rgba(0, 0, 0, 0.2);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); (可以參考 CSS,相容大部分主流瀏覽器包括IE;為什麼不使用opacity呢?因為opacity會讓文字也透明(子元素也會透明)。
HTML骨架很重要,你寫的html的結果應該是好的。
程式碼部分:
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
|
JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
|
首先是初始化部分:將除了第一張輪播圖片意外的圖片都隱藏,並且隱藏向前、向後按鈕,使第一個索引按鈕處於啟動狀態。
事件部分:透過jquery的hover()綁定滑鼠上懸以及離開時的事件處理, jquery的bind()方法綁定滑鼠點擊事件處理向前、向後翻動、
輪播控制:pre(), next(), play(), start()開始自動輪播,stop()停止自動輪播。
上面的js寫的比較散,結構也不太好,讀起來也比較費力,也不易使用,耦合度較高。下篇將給出一個純粹的jquery輪播插件, 該插件可以定制各種效果,方便的配置以及可擴展。
以下是整體的程式碼:
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 |
|
至此一個簡單的jquery輪播效果就完成了,當然還有很多需要改進的地方。
使用外掛實現
上面的效果看起來還令人滿意,唯一不足的就是:每次需要輪播效果時,要將程式碼複製貼上過去,如果有些部分需要修改(例如:輪播時的動畫效果,前一篇使用的是jquery的淡入淡出效果,如果改成滑動效果,不可避免的要修改js程式碼),那麼就需要對js程式碼進行修改,對我所寫的jquery輪播效果的js程式碼不熟悉的程序員來說,修改這些js確實很難。輪播插件所要實現的目標之一就是插件可以靈活配置(不光只是本篇文章的插件),程式設計師只需要寫少量的程式碼就可以實現豐富的功能,這當然是一件很好的事情。本篇文章的輪播插件的html和css部分需要程式設計師自己寫,而實現效果的js只需要少量的編寫。
這裡我們使用到的zslider外掛在GitHub上開源:
github:https://github.com/ricciozhang/zslider_v1
嗯,我們來看程式碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 |
|

熱門文章

熱門文章

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

福昕PDF閱讀器如何將pdf文件轉成jpg圖片-福昕PDF閱讀器將pdf文件轉成jpg圖片的方法
