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

  1. Robertengep表示:

    https://easyrxindia.shop/# online shopping pharmacy india

  2. Magnificent beat ! I wish to apprentice while you amend your site, how can i subscribe for a blog web site? The account helped me a acceptable deal. I had been a little bit acquainted of this your broadcast offered bright clear idea

  3. Peterhew表示:

    safe canadian pharmacy: safe canadian pharmacy – www canadianonlinepharmacy

  4. I have noticed that car insurance corporations know the vehicles which are liable to accidents and other risks. Additionally, these people know what style of cars are inclined to higher risk and also the higher risk they have got the higher the premium amount. Understanding the uncomplicated basics involving car insurance just might help you choose the right types of insurance policy which will take care of your wants in case you happen to be involved in an accident. Thanks for sharing a ideas on your own blog.

  5. Hermanswoff表示:

    canadian family pharmacy: best rated canadian pharmacy – canadian world pharmacy

  6. Shop now for premium styles at rag and bone jeans outlet.

  7. JeremyPsymn表示:

    http://mexstarpharma.com/# mexican pharmaceuticals online

  8. Peterhew表示:

    mexican pharmaceuticals online: mexican pharmaceuticals online – mexico pharmacies prescription drugs

  9. Robertengep表示:

    https://easyrxindia.com/# indian pharmacies safe

  10. I have noticed that of all types of insurance, medical health insurance is the most debatable because of the clash between the insurance cover company’s duty to remain profitable and the client’s need to have insurance policy. Insurance companies’ profits on health and fitness plans are certainly low, hence some businesses struggle to generate income. Thanks for the concepts you reveal through this web site.

  11. Hermanswoff表示:

    best canadian online pharmacy reviews: canadian pharmacy ratings – cheap canadian pharmacy

  12. Peterhew表示:

    canadian pharmacies that deliver to the us: pharmacy canadian superstore – online canadian drugstore

  13. AnthonyPress表示:

    best online pharmacies in mexico pharmacies in mexico that ship to usa mexican mail order pharmacies

  14. JeremyPsymn表示:

    http://easyrxindia.com/# buy medicines online in india

  15. Robertengep表示:

    http://easyrxcanada.com/# canadian pharmacy online reviews

  16. AnthonyPress表示:

    reputable indian online pharmacy mail order pharmacy india pharmacy website india

  17. Robertengep表示:

    https://easyrxcanada.online/# legitimate canadian pharmacy online

  18. JeremyPsymn表示:

    https://easyrxindia.shop/# reputable indian online pharmacy

  19. Hermanswoff表示:

    canadian pharmacy 365: canadian pharmacy king – best online canadian pharmacy

  20. AnthonyPress表示:

    п»їbest mexican online pharmacies mexican drugstore online mexican mail order pharmacies

  21. Peterhew表示:

    top online pharmacy india: online pharmacy india – india pharmacy mail order

  22. Robertengep表示:

    https://easyrxcanada.online/# canadian pharmacy victoza

  23. I simply could not leave your website before suggesting that I really loved the usual information an individual provide on your visitors? Is going to be again frequently in order to check up on new posts

  24. Spot on with this write-up, I truly think this web site needs way more consideration. I?ll probably be again to learn way more, thanks for that info.

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

  26. This is undoubtedly one of the greatest articles I’ve read on this topic! The author’s extensive knowledge and enthusiasm for the subject are apparent in every paragraph. I’m so grateful for finding this piece as it has deepened my understanding and stimulated my curiosity even further. Thank you, author, for taking the time to craft such a phenomenal article!

  27. fantastic post, very informative. I wonder why the other experts of this sector don’t notice this. You should continue your writing. I’m sure, you’ve a great readers’ base already!

  28. F*ckin? tremendous things here. I?m very glad to see your article. Thanks a lot and i’m looking forward to contact you. Will you please drop me a mail?

  29. Discover the perfect blend of style and comfort at marmot clothing.

  30. Jamesric表示:

    tamoxifen and bone density: tamoxifen chemo – where can i buy nolvadex

發佈留言

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