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

  1. GeorgeDaf表示:

    Pharmacie Internationale en ligne: levitra en ligne – п»їpharmacie en ligne france

  2. CordellMew表示:

    pharmacie en ligne france pas cher: Medicaments en ligne livres en 24h – Pharmacie sans ordonnance

  3. Allenacurf表示:

    Viagra gГ©nГ©rique sans ordonnance en pharmacie: viagra en ligne – Viagra sans ordonnance livraison 48h

  4. EdwardGROOM表示:

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

  5. EdwardGROOM表示:

    pharmacie en ligne france livraison belgique: trouver un mГ©dicament en pharmacie – п»їpharmacie en ligne france

  6. Allenacurf表示:

    Viagra sans ordonnance 24h suisse: Viagra generique en pharmacie – Viagra pas cher paris

  7. IgnacioSlima表示:

    pharmacie en ligne fiable: kamagra livraison 24h – pharmacie en ligne pas cher

  8. Lhxkzp表示:

    fludrocortisone pills local – lansoprazole pills strict prevacid pills lift

  9. Pkimdv表示:

    clarithromycin sleeve – cytotec pills hopeful cytotec pills batter

  10. Allenacurf表示:

    pharmacie en ligne france fiable: kamagra en ligne – pharmacie en ligne livraison europe

  11. Pornhu表示:

    One thing is that if you are searching for a student loan you may find that you will need a co-signer. There are many scenarios where this is true because you should find that you do not use a past credit rating so the lender will require you have someone cosign the credit for you. Good post.

  12. EdwardGROOM表示:

    pharmacie en ligne france pas cher: acheter kamagra site fiable – Pharmacie sans ordonnance

  13. Allenacurf表示:

    trouver un mГ©dicament en pharmacie: Levitra acheter – pharmacies en ligne certifiГ©es

  14. EdwardGROOM表示:

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

  15. IgnacioSlima表示:

    Viagra en france livraison rapide: Viagra homme sans prescription – Viagra homme prix en pharmacie sans ordonnance

  16. I’m very happy to read this. This is the type of manual that needs to be given and not the random misinformation that’s at the other blogs. Appreciate your sharing this best doc.

  17. Allenacurf表示:

    pharmacie en ligne avec ordonnance: kamagra livraison 24h – Pharmacie Internationale en ligne

  18. IgnacioSlima表示:

    vente de mГ©dicament en ligne: kamagra livraison 24h – pharmacie en ligne sans ordonnance

  19. Allenacurf表示:

    pharmacie en ligne avec ordonnance: kamagra 100mg prix – pharmacie en ligne france livraison belgique

  20. EdwardGROOM表示:

    Pharmacie sans ordonnance: Medicaments en ligne livres en 24h – pharmacie en ligne

  21. Allenacurf表示:

    acheter mГ©dicament en ligne sans ordonnance: Acheter Cialis – pharmacies en ligne certifiГ©es

  22. EdwardGROOM表示:

    Pharmacie en ligne livraison Europe: pharmacie en ligne france livraison internationale – pharmacie en ligne avec ordonnance

  23. IgnacioSlima表示:

    pharmacie en ligne livraison europe: cialis generique – п»їpharmacie en ligne france

  24. Allenacurf表示:

    pharmacie en ligne: Medicaments en ligne livres en 24h – vente de mГ©dicament en ligne

  25. Hmm it looks like your site ate my first comment (it was extremely long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your blog. I as well am an aspiring blog blogger but I’m still new to the whole thing. Do you have any helpful hints for beginner blog writers? I’d certainly appreciate it.

  26. Mgkuix表示:

    ascorbic acid whip – ascorbic acid potato ascorbic acid gather

  27. Allenacurf表示:

    pharmacie en ligne france livraison belgique: levitra generique prix en pharmacie – pharmacie en ligne france livraison internationale

  28. IgnacioSlima表示:

    pharmacie en ligne pas cher: pharmacie en ligne sans ordonnance – pharmacie en ligne france livraison belgique

  29. Allenacurf表示:

    pharmacie en ligne livraison europe: Cialis sans ordonnance 24h – pharmacie en ligne france pas cher

  30. Dvnige表示:

    promethazine grand – promethazine royal promethazine sword

發佈留言

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