jQuery Plugin – Rotating Banner

很多商業網站中都會需要輪播的廣告,來介紹該網站中所販售的所有商品,而這樣的輪播廣告過往都使用Flash來設計,但按照前幾篇文章所提,當然也要繼續「去Flash化」,所以這次馬老師利用到了jQuery來製作了輪播式的廣告橫幅給大家參考,除了我的範例之外,大家也可以到jQuery Rotating Banner的官網逛逛,說不定會有更多的收穫!

jQuery Rotating Banner 範例圖

大家可以先參考本次製作的範例檔範例檔下載

程式碼說明:在網頁中套用jpb_slides類別的div就是置入廣告圖檔的div,但要注意廣告圖檔的寬度、高度,本範例之圖檔為w:715px、h:215px,所以要找到CSS檔中的#jqb_object和.jqb_slide修改div寬、高。

<div id="jqb_object">

  <div class="jqb_slides">
	<div class="jqb_slide" title="NEZ-E460 精彩外型 耀你看見" ><a href="img/b1.jpg"><img src="img/b1.jpg" width="715" height="215" alt="" /></a></div>
	<div class="jqb_slide" title="SONY 開箱驚喜 加碼抽大獎" ><a href="img/b2.jpg"><img src="img/b2.jpg" width="715" height="215" alt="" /></a></div>
	<div class="jqb_slide" title="VAIO Z 創新演繹 來自日本" ><a href="img/b3.jpg"><img src="img/b3.jpg" width="715" height="215" alt="" /></a></div>
	<div class="jqb_slide" title="NWZ-W262 更輕更小 防水無線" ><a href="img/b4.jpg"><img src="img/b4.jpg" width="715" height="215" alt="" /></a></div>
	<div class="jqb_slide" title="Xperia ray 優雅出眾 絕美設計" ><a href="img/b5.jpg"><img src="img/b5.jpg" width="715" height="215" alt="" /></a></div>
	<div class="jqb_slide" title="DSC-TX100V 瞬間精彩 片刻生動" ><a href="img/b6.jpg"><img src="img/b6.jpg" width="715" height="215" alt="" /></a></div>

  </div>

	<div class="jqb_bar">
		<div class="jqb_info"></div>
		<div id="btn_next" class="jqb_btn jqb_btn_next"></div>
		<div id="btn_pauseplay" class="jqb_btn jqb_btn_pause"></div>
		<div id="btn_prev" class="jqb_btn jqb_btn_prev"></div>
	</div>

</div>

CSS中jqb_bar類別是用來控制下方半透明區塊,如果有需要也可以自行更改成所需的大小,大家看完後有任何問題歡迎在此回應,謝謝!

註:本範例所使用的圖片版權屬於Sony公司所有。

You may also like...

2,999 Responses

  1. Franksib表示:

    deneme bonusu veren slot siteleri: slot siteleri – slot siteleri 2024

  2. Robertevend表示:

    http://slotsiteleri.guru/# deneme bonusu veren siteler

  3. Keithadoms表示:

    https://aviatoroyna.bid/# aviator nas?l oynan?r

  4. Williamfer表示:

    sweet bonanza 100 tl: sweet bonanza hilesi – sweet bonanza demo turkce

  5. Robertevend表示:

    http://pinupgiris.fun/# pin-up casino giris

  6. Cviojj表示:

    quetiapine 50mg price – purchase eskalith pill buy eskalith without prescription

  7. Franksib表示:

    pin up indir: pin up – pin up giris

  8. Franksib表示:

    en iyi slot siteleri 2024: slot casino siteleri – en cok kazandiran slot siteleri

  9. Robertevend表示:

    https://gatesofolympus.auction/# gates of olympus max win

  10. Franksib表示:

    gates of olympus nas?l para kazanilir: gates of olympus oyna ucretsiz – gates of olympus s?rlar?

  11. Robertevend表示:

    https://pinupgiris.fun/# pin up giris

  12. Williamfer表示:

    guvenilir slot siteleri 2024: bonus veren slot siteleri – yeni slot siteleri

  13. Franksib表示:

    gates of olympus oyna demo: gates of olympus giris – gate of olympus hile

  14. Robertevend表示:

    http://aviatoroyna.bid/# aviator oyunu

  15. Keithadoms表示:

    http://sweetbonanza.bid/# sweet bonanza kazanma saatleri

  16. Franksib表示:

    aviator sinyal hilesi ucretsiz: aviator sinyal hilesi apk – aviator sinyal hilesi apk

  17. Williamfer表示:

    en cok kazandiran slot siteleri: en cok kazandiran slot siteleri – slot siteleri guvenilir

  18. Franksib表示:

    gates of olympus demo oyna: gates of olympus taktik – gates of olympus

  19. Robertevend表示:

    https://pinupgiris.fun/# pin up casino indir

  20. Franksib表示:

    pin-up casino giris: pin up casino – pin-up online

  21. Robertevend表示:

    https://gatesofolympus.auction/# pragmatic play gates of olympus

  22. Franksib表示:

    aviator oyunu 100 tl: aviator oyna slot – aviator mostbet

  23. Keithadoms表示:

    http://sweetbonanza.bid/# sweet bonanza free spin demo

  24. Ccorzj表示:

    clozapine 100mg pills – purchase tritace for sale order famotidine 20mg without prescription

  25. Robertevend表示:

    http://slotsiteleri.guru/# slot oyunlari siteleri

  26. Williamfer表示:

    pin up casino indir: pin-up bonanza – pin up casino

  27. Franksib表示:

    ucak oyunu bahis aviator: aviator oyunu 20 tl – aviator

  28. Keithadoms表示:

    http://gatesofolympus.auction/# gates of olympus nas?l para kazanilir

  29. Franksib表示:

    pin-up online: pin up indir – pin up aviator

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。