怎麼製作網站上的圖文BANNER輪播圖
在之前的建站教程里，我們講了網站製作banner輪播圖的通用方法，這種輪播圖就是比較常見的純圖片的切換輪播圖。現在還有一種輪播圖就是圖文輪播圖，在圖片輪播的基礎上還有文字的切換。效果如下圖：
下面學做網站論壇介紹一下網站上的圖文輪播圖的製作方法。
- 製作圖文輪播圖，需要下載一個JQUERY 插件jquery.devrama.slider.js，下載地址：鏈接: https://pan.baidu.com/s/1Ova6702Y3N6-z61sYJiVcg 提取碼: 84t5
- 將下載的JQEURY插件引入到自己的網站代碼里，注意設置文件的路徑。
1<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap"><span style="color: #339933;"><</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">"text/javascript"</span> src<span style="color: #339933;">=</span><span style="color: #3366CC;">"js/jquery.min.js"</span><span style="color: #339933;">></</span>script<span style="color: #339933;">></span><br><span style="color: #339933;"><</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">"text/javascript"</span> src<span style="color: #339933;">=</span><span style="color: #3366CC;">"js/jquery.devrama.slider.js"</span><span style="color: #339933;">></</span>script<span style="color: #339933;">></span></div></div> - 在需要顯示圖文輪播圖的位置，放上以下的代碼：（可以修改代碼里的數字，來改變文字顯示的位置）
1234567<div class="codecolorer-container html4strict geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="html4strict codecolorer" style="white-space:nowrap"><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"example-animation"</span>></span><br><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">div</span> data-lazy-<span style="color: #000066;">background</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"images/1.jpg"</span>></span><br><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">h3</span> data-pos<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"['0%', '110%', '0%', '5%']"</span> data-duration<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"700"</span> data-effect<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"move"</span>></span><br>Moving<br><span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>></span><br><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">div</span> data-pos<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"['-30%', '25%', '40%', '25%']"</span> data-duration<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"700"</span> data-effect<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"move"</span>></span><br>Text<br><span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>></span><br><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">div</span> data-pos<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"['56%', '-40%', '56%', '11%']"</span> data-duration<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"700"</span> data-effect<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"move"</span>></span><br>and Image<br><span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>></span><br><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">div</span> data-pos<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"['23%', '110%', '23%', '42%']"</span> data-duration<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"700"</span> data-effect<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"move"</span>></span><br><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">img</span> data-lazy-<span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"images/add.jpg"</span><span style="color: #66cc66;">/</span>></span><br><span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>></span><br><span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>></span><br><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">div</span> data-lazy-<span style="color: #000066;">background</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"images/2.jpg"</span>></span><br><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">h3</span> data-pos<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"['0%', '8%']"</span> data-duration<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"1000"</span> data-effect<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"fadein"</span>></span><br>Fadein<br><span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>></span><br><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">div</span> data-pos<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"['44%', '15%']"</span> data-duration<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"700"</span> data-effect<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"fadein"</span>></span><br>Text<br><span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>></span><br><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">div</span> data-pos<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"['66%', '11%']"</span> data-duration<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"700"</span> data-effect<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"fadein"</span>></span><br>and Image<br><span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>></span><br><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">div</span> data-pos<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"['29%', '46%']"</span> data-duration<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"700"</span> data-delay<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"500"</span> data-effect<span style="color: #66cc66;">=</span><span style="color: #ff0000;">"fadein"</span>></span><br><span style="color: #009900;"><<span style="color: #000000; font-weight: bold;">img</span> data-lazy-<span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"images/add.jpg"</span><span style="color: #66cc66;">/</span>></span><br><span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>></span><br><span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>></span><br><span style="color: #009900;"><<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>></span></div></div> - 在網頁的底部再放以下的JS代碼，實現輪播。
123<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap"><span style="color: #339933;"><</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">"text/javascript"</span><span style="color: #339933;">></span><br>$<span style="color: #009900;">(</span>document<span style="color: #009900;">)</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span><br>$<span style="color: #009900;">(</span><span style="color: #3366CC;">'.example-animation'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">DrSlider</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//Yes! that's it!</span><br><span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #339933;"></</span>script<span style="color: #339933;">></span></div></div> - 最後加上控制圖文輪播的樣式CSS代碼：
123456789101112131415161718192021222324252627<div class="codecolorer-container html4strict geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="html4strict codecolorer" style="white-space:nowrap">.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea { background: none repeat scroll 0% 0% transparent ! important; border: 0px none ! important; bottom: auto ! important; float: none ! important; height: auto ! important; left: auto ! important; line-height: 1.1em ! important; margin: 0px ! important; outline: 0px none ! important; overflow: visible ! important; padding: 0px ! important; position: static ! important; right: auto ! important; text-align: left ! important; top: auto ! important; vertical-align: baseline ! important; width: auto ! important; box-sizing: content-box ! important; font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace ! important; font-weight: normal ! important; font-style: normal ! important; font-size: 1em ! important; min-height: inherit ! important; }<br>.syntaxhighlighter { width: 100% ! important; margin: 1em 0px ! important; position: relative ! important; overflow: auto ! important; font-size: 1em ! important; }<br>.syntaxhighlighter .line { white-space: pre ! important; }<br>.syntaxhighlighter table { width: 100% ! important; }<br>.syntaxhighlighter table td.code { width: 100% ! important; }<br>.syntaxhighlighter table td.code .container { position: relative ! important; }<br>.syntaxhighlighter table td.code .line { padding: 0px 1em ! important; }<br>.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line { padding-left: 0em ! important; }<br>.syntaxhighlighter .toolbar { position: absolute ! important; right: 1px ! important; top: 1px ! important; width: 11px ! important; height: 11px ! important; font-size: 10px ! important; z-index: 10 ! important; }<br>.syntaxhighlighter .toolbar a { display: block ! important; text-align: center ! important; text-decoration: none ! important; padding-top: 1px ! important; }<br><br>.syntaxhighlighter { background-color: black ! important; }<br>.syntaxhighlighter .line.alt1 { background-color: black ! important; }<br>.syntaxhighlighter .line.alt2 { background-color: black ! important; }<br>.syntaxhighlighter .toolbar { color: white ! important; background: none repeat scroll 0% 0% rgb(153, 0, 0) ! important; border: medium none ! important; }<br>.syntaxhighlighter .toolbar a { color: white ! important; }<br>.syntaxhighlighter .toolbar a:hover { color: rgb(156, 207, 244) ! important; }<br>.syntaxhighlighter .plain, .syntaxhighlighter .plain a { color: rgb(211, 211, 211) ! important; }<br>.syntaxhighlighter .string, .syntaxhighlighter .string a { color: rgb(255, 158, 123) ! important; }<br>.syntaxhighlighter .keyword { color: aqua ! important; }<br>.syntaxhighlighter .color1, .syntaxhighlighter .color1 a { color: rgb(235, 219, 141) ! important; }<br><br>body { }<br>#content { margin: 0px auto 100px; max-width: 1200px; font-size: 16px; }<br>#content .syntaxhighlighter { overflow-y: hidden ! important; }<br>#content .syntaxhighlighter > table > tbody > tr > td.code { padding: 10px ! important; }<br>#content .photo-license-toggle { margin: 0px auto; padding: 10px 0px; max-width: 1024px; text-align: right; }<br>#content .photo-license { display: none; margin: 0px auto; max-width: 1024px; font-size: 0.8em; border: 1px dashed rgb(111, 111, 111); border-radius: 6px; padding: 15px 10px; line-height: 1.6em; }<br>.example-animation { color: rgb(255, 255, 255); font-size: 60px; }</div></div> - 這樣就可製作出圖文輪播功能了。為了方便大家調用，提供一下整個圖文輪播的示例代碼。下載地址：https://pan.baidu.com/s/1rKPSap7iipl6eCevwOlkfw 提取碼: 82fw
由於網站搬家，部分鏈接失效，如無法下載，請聯繫站長！謝謝支持！
1. 帶 [親測] 說明源碼已經被站長親測過!
2. 下載後的源碼請在24小時內刪除,僅供學慣用途！
3. 分享目的僅供大家學習和交流，請不要用於商業用途！
4. 本站資源售價只是贊助，收取費用僅維持本站的日常運營所需！
5. 本站所有資源來源於站長上傳和網路，如有侵權請郵件聯繫站長！
6. 沒帶 [親測] 代表站長時間緊促,站長會保持每天更新 [親測] 源碼 !
7. 盜版ripro用戶購買ripro美化無擔保,若設置不成功/不生效我們不支持退款!
8. 本站提供的源碼、模板、插件等等其他資源，都不包含技術服務請大家諒解！
9. 如果你也有好源碼或者教程，可以到審核區發布，分享有金幣獎勵和額外收入!
10.如果您購買了某個產品，而我們還沒來得及更新，請聯繫站長或留言催更，謝謝理解 !
GG資源網 » 怎麼製作網站上的圖文BANNER輪播圖
1. 帶 [親測] 說明源碼已經被站長親測過!
2. 下載後的源碼請在24小時內刪除,僅供學慣用途！
3. 分享目的僅供大家學習和交流，請不要用於商業用途！
4. 本站資源售價只是贊助，收取費用僅維持本站的日常運營所需！
5. 本站所有資源來源於站長上傳和網路，如有侵權請郵件聯繫站長！
6. 沒帶 [親測] 代表站長時間緊促,站長會保持每天更新 [親測] 源碼 !
7. 盜版ripro用戶購買ripro美化無擔保,若設置不成功/不生效我們不支持退款!
8. 本站提供的源碼、模板、插件等等其他資源，都不包含技術服務請大家諒解！
9. 如果你也有好源碼或者教程，可以到審核區發布，分享有金幣獎勵和額外收入!
10.如果您購買了某個產品，而我們還沒來得及更新，請聯繫站長或留言催更，謝謝理解 !
GG資源網 » 怎麼製作網站上的圖文BANNER輪播圖
