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...

7,086 Responses

  1. Georgedrync表示:

    when will generic cialis be available in the usa: Buy Cialis online – when will generic cialis be available in the usa

  2. Whitescreen66表示:

    Thanks for revealing your ideas. I would also like to convey that video games have been actually evolving. Technology advances and revolutions have assisted create reasonable and active games. All these entertainment games were not really sensible when the real concept was first being tried. Just like other designs of know-how, video games also have had to progress through many ages. This is testimony towards the fast development of video games.

  3. Undeniably consider that that you said. Your favourite justification appeared to be on the internet the easiest thing to have in mind of. I say to you, I certainly get irked whilst other folks consider worries that they plainly do not realize about. You managed to hit the nail upon the top and defined out the entire thing without having side-effects , other folks can take a signal. Will probably be again to get more. Thank you

  4. Georgedrync表示:

    viagra online: Cheap generic Viagra – buy viagra order

  5. Samueldub表示:

    https://tadalafil.auction/# cialis in manitoba

  6. kbejl350表示:

  7. fzqmt605表示:

  8. crsik47表示:

  9. Georgedrync表示:

    viagra pills: Cheap generic Viagra – generic viagra overnight

  10. TomasRop表示:

    farmacie online sicure: Cialis generico 5 mg prezzo – comprare farmaci online con ricetta

  11. RandyLunda表示:

    farmacie online affidabili: kamagra gel prezzo – acquisto farmaci con ricetta

  12. Timothyzew表示:

    http://cialisgenerico.life/# farmacia online

  13. This design is incredible! You definitely know how to keep a reader amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Wonderful job. I really loved what you had to say, and more than that, how you presented it. Too cool!

  14. TomasRop表示:

    migliori farmacie online 2024: Farmacie on line spedizione gratuita – migliori farmacie online 2024

  15. Thanks for expressing your ideas. The one thing is that learners have a choice between federal student loan as well as a private education loan where it can be easier to select student loan debt consolidation than in the federal education loan.

  16. RandyLunda表示:

    farmacia online piГ№ conveniente: Cialis generico controindicazioni – comprare farmaci online con ricetta

  17. TomasRop表示:

    viagra originale in 24 ore contrassegno: viagra farmacia – miglior sito dove acquistare viagra

  18. RandyLunda表示:

    Farmacie online sicure: Farmacie che vendono Cialis senza ricetta – farmacie online autorizzate elenco

  19. Timothyzew表示:

    http://viagragenerico.site/# viagra online spedizione gratuita

  20. Vzriei表示:

    how to buy lactulose – betahistine where to buy buy betahistine online cheap

  21. TomasRop表示:

    viagra originale in 24 ore contrassegno: viagra generico recensioni – kamagra senza ricetta in farmacia

  22. An fascinating dialogue is worth comment. I think that it is best to write more on this subject, it won’t be a taboo topic but usually people are not enough to speak on such topics. To the next. Cheers

  23. TomasRop表示:

    Farmacie on line spedizione gratuita: kamagra gel prezzo – top farmacia online

  24. RandyLunda表示:

    acquisto farmaci con ricetta: Cialis generico controindicazioni – acquisto farmaci con ricetta

  25. Timothyzew表示:

    https://avanafil.pro/# comprare farmaci online all’estero

  26. I have read some good stuff here. Certainly worth bookmarking for revisiting. I surprise how much effort you put to make such a fantastic informative web site.

  27. RandyLunda表示:

    comprare farmaci online con ricetta: avanafil generico – acquistare farmaci senza ricetta

  28. TomasRop表示:

    farmacia online senza ricetta: Farmacia online migliore – migliori farmacie online 2024

  29. I am really enjoying the theme/design of your web site. Do you ever run into any web browser compatibility issues? A handful of my blog readers have complained about my site not working correctly in Explorer but looks great in Safari. Do you have any advice to help fix this issue?

  30. I am really impressed with your writing skills and also with the layout on your blog. Is this a paid theme or did you customize it yourself? Anyway keep up the excellent quality writing, it?s rare to see a great blog like this one these days..

發佈留言

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