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,164 Responses

  1. Thanks for another informative blog. Where else could I get that type of info written in such an ideal way? I have a project that I am just now working on, and I have been on the look out for such information.

  2. SightCare表示:

    Excellent web site. Lots of useful information here. I’m sending it to a few buddies ans also sharing in delicious. And certainly, thank you for your sweat!

  3. Bspxck表示:

    buy rabeprazole 10mg pills – metoclopramide 10mg usa brand domperidone 10mg

  4. I couldn’t resist commenting

  5. I used to be very happy to search out this web-site.I needed to thanks in your time for this excellent learn!! I definitely enjoying each little bit of it and I have you bookmarked to check out new stuff you weblog post.

  6. Gpwwcc表示:

    order dulcolax generic – buy bisacodyl pills for sale buy liv52 20mg sale

  7. Youre so cool! I dont suppose Ive read something like this before. So nice to search out somebody with some unique thoughts on this subject. realy thank you for starting this up. this website is something that is needed on the internet, someone with a bit of originality. useful job for bringing one thing new to the web!

  8. Allenacurf表示:

    Viagra vente libre allemagne: Viagra generique en pharmacie – Viagra sans ordonnance pharmacie France

  9. Robertdiz表示:

    acheter mГ©dicament en ligne sans ordonnance: kamagra gel – pharmacie en ligne fiable

  10. Lottery Defeater: What Is It? A software tool called Lottery Defeater was created to raise the odds of winning lottery tickets.

  11. Robertdiz表示:

    pharmacie en ligne pas cher: Pharmacies en ligne certifiees – pharmacie en ligne livraison europe

  12. IgnacioSlima表示:

    acheter mГ©dicament en ligne sans ordonnance: Levitra acheter – pharmacie en ligne france livraison belgique

  13. Allenacurf表示:

    pharmacie en ligne: Levitra 20mg prix en pharmacie – pharmacie en ligne fiable

  14. What Is Exactly Emperor’s Vigor Tonic? Emperor’s Vigor Tonic is a clinically researched natural male health formula that contains a proprietary blend of carefully selected ingredients.

  15. JuliusIntal表示:

    pharmacie en ligne france pas cher: cialis generique – pharmacie en ligne france livraison internationale

  16. Robertdiz表示:

    Achat mГ©dicament en ligne fiable: Cialis sans ordonnance 24h – pharmacie en ligne fiable

  17. Allenacurf表示:

    Viagra sans ordonnance 24h suisse: Acheter du Viagra sans ordonnance – Viagra pas cher livraison rapide france

  18. cock sleeve表示:

    Hi! I know this is kinda off topic but I was wondering if you knew where I could find a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having trouble finding one? Thanks a lot!

  19. Allenacurf表示:

    pharmacie en ligne fiable: kamagra pas cher – pharmacie en ligne pas cher

  20. IgnacioSlima表示:

    Achat mГ©dicament en ligne fiable: Acheter Cialis – pharmacie en ligne livraison europe

  21. Allenacurf表示:

    pharmacies en ligne certifiГ©es: pharmacie en ligne sans ordonnance – п»їpharmacie en ligne france

  22. RobertBlica表示:

    https://cenligne.com/# acheter médicament en ligne sans ordonnance

  23. IgnacioSlima表示:

    Pharmacie sans ordonnance: Medicaments en ligne livres en 24h – vente de mГ©dicament en ligne

  24. Some truly interesting points you have written.Aided me a lot, just what I was searching for : D.

  25. GeorgeDaf表示:

    pharmacie en ligne france fiable: Pharmacies en ligne certifiees – Pharmacie en ligne livraison Europe

  26. Allenacurf表示:

    Pharmacie sans ordonnance: kamagra gel – trouver un mГ©dicament en pharmacie

  27. GeorgeDaf表示:

    pharmacie en ligne sans ordonnance: pharmacie en ligne – pharmacie en ligne

  28. Allenacurf表示:

    pharmacie en ligne france livraison internationale: Cialis sans ordonnance 24h – pharmacie en ligne

  29. RobertBlica表示:

    http://kamagraenligne.com/# pharmacie en ligne

  30. IgnacioSlima表示:

    pharmacie en ligne france livraison internationale: pharmacie en ligne pas cher – trouver un mГ©dicament en pharmacie

發佈留言

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