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

11,608 Responses

  1. JamesGag表示:

    pet meds without vet prescription canada: fda approved canadian online pharmacies – canadian pharmacy antibiotics

  2. Howardenace表示:

    canada pharmacy 24h: fda approved canadian online pharmacies – reputable canadian online pharmacies

  3. Howardenace表示:

    canadian world pharmacy: legitimate canadian pharmacies online – best online canadian pharmacy

  4. Peopletfr表示:

    Психолог t me. Психолог онлайн анонимно. Получить КОНСУЛЬТАЦИЮ и ПОДДЕРЖКУ профессиональных психологов.

  5. JamesGag表示:

    canada rx pharmacy: certified canada pharmacy online – canadian valley pharmacy

  6. Cyberafh表示:

    Чат с психологом в телеге. Получите консультацию онлайн-психолога в чате прямо сейчас. Онлайн-консультация психолога.

  7. Iceryw表示:

    Психолог помогающий искать решения в непростых психологических ситуациях. Чат психологической поддержки. Дипломированный психолог с опытом работы и отзывами клиентов.

  8. Nightrdk表示:

    Психолог онлайн анонимно. Анонимный чат с психологом телеграм. Психолог помогающий искать решения в непростых психологических ситуациях.

  9. Catzjx表示:

    Помощь психолога онлайн. Чат с психологом в телеге. Психолог оказывает помощь онлайн в чате.

  10. Montebeera表示:

    mexican pharmacy online order Mexican Pharm Inter reliable mexican pharmacies

  11. Ninjatou表示:

    Психологическая и информационная онлайн-помощь. Психолог в телеграм. Онлайн чат с психологом без регистрации.

  12. Montebeera表示:

    canadianpharmacy com legitimate canadian pharmacies online canadian medications

  13. Moneywyn表示:

    Психолог онлайн чат. Психолог онлайн анонимно. Психолог онлайн чат.

  14. Arthurhow表示:

    http://indiamedfast.com/# online medicine shopping in india
    legal to buy prescription drugs from canada

  15. Wolfvzq表示:

    Психолог онлайн анонимно. Чат психологической поддержки. Онлайн-консультация психолога.

  16. Williszew表示:

    https://interpharmonline.shop/# canadian pharmacy

  17. JamesGag表示:

    legitimate canadian pharmacies: Inter Pharm Online – best rated canadian pharmacy

  18. Goldgig表示:

    Получить первую онлайн консультацию психолога чате. Чат с психологом в телеге. Телеграм психолог.

  19. Montebeera表示:

    best rated canadian pharmacy Certified International Pharmacy Online my canadian pharmacy

  20. Catfoc表示:

    Получите консультацию онлайн-психолога в чате прямо сейчас. Психолог онлайн анонимно. Онлайн-консультация психолога.

  21. Howardenace表示:

    best canadian pharmacy online: canadian drugstore online no prescription – canadian pharmacy world reviews

  22. Arthurhow表示:

    https://interpharmonline.com/# prescription drugs canada buy online
    legit canadian online pharmacy

  23. Ninjanko表示:

    Психолог онлайн анонимно. Психолог онлайн анонимно. Психолог t me.

  24. Cathcp表示:

    Психолог помогающий искать решения в непростых психологических ситуациях. Психолог в телеграм. Онлайн-консультация психолога.

  25. KODwtb表示:

    Чат с психологом в телеге. Психолог t me. Анонимный чат с психологом телеграм.

  26. Dreamcxz表示:

    Психолог оказывает помощь онлайн в чате. Дипломированный психолог с опытом работы и отзывами клиентов. Получить онлайн консультацию психолога чате.

  27. Lorduak表示:

    Чат с психологом в телеге. Помощь психолога онлайн. Получите консультацию онлайн-психолога в чате прямо сейчас.

  28. Cyberobi表示:

    Круглосуточная запись на онлайн-консультацию психолога. Психолог оказывает помощь онлайн в чате. Психолог помогающий искать решения в непростых психологических ситуациях.

  29. Williszew表示:

    http://interpharmonline.com/# canadian online drugs

  30. Williszew表示:

    https://mexicanpharminter.shop/# MexicanPharmInter

發佈留言

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