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

  1. CoreyNeura表示:

    cheap semaglutide pills rybelsus semaglutide tablets buy semaglutide

  2. StevenAxofs表示:

    http://drugs1st.pro/# drugs1st

  3. StevenAxofs表示:

    https://cenforce.icu/# cenforce for sale

  4. Gay Porn表示:

    Ahaa, its pleasant dialogue about this article at this place at this webpage, I have read all that, so now me also commenting at this place.|

  5. BradleyPobby表示:

    http://drugs1st.pro/# drugs1st

  6. I believe that avoiding packaged foods would be the first step to be able to lose weight. They might taste excellent, but refined foods include very little vitamins and minerals, making you feed on more only to have enough electricity to get throughout the day. Should you be constantly taking in these foods, switching to cereals and other complex carbohydrates will help you to have more electricity while feeding on less. Interesting blog post.

  7. BradleyPobby表示:

    http://semaglutidetablets.store/# buy rybelsus online

  8. CoreyNeura表示:

    buy Kamagra buy Kamagra sildenafil oral jelly 100mg kamagra

  9. JamesThync表示:

    buy cenforce: cenforce for sale – cheapest cenforce

  10. What’s up, I check your new stuff daily. Your humoristic style is awesome, keep it up!|

  11. betting scam表示:

    If you are going for most excellent contents like I do, just visit this site everyday since it gives feature contents, thanks|

  12. JamesThync表示:

    buy Kamagra: Kamagra 100mg price – sildenafil oral jelly 100mg kamagra

  13. StevenAxofs表示:

    http://edpills.men/# cheap ed medication

  14. BradleyPobby表示:

    https://edpills.men/# ed medications online

  15. Charlescek表示:

    cheapest ed online: cheap boner pills – erectile dysfunction pills for sale

發佈留言

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