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

  1. Louislen表示:

    http://apotekonlinerecept.com/# Apotek hemleverans recept

  2. Derekgroum表示:

    Kamagra kaufen: Kamagra Original – Kamagra online bestellen

  3. Michaeltor表示:

    ApotheekMax: Betrouwbare online apotheek zonder recept – Apotheek Max

  4. Michaeltor表示:

    Betrouwbare online apotheek zonder recept: Online apotheek Nederland met recept – ApotheekMax

  5. HomerFaw表示:

    https://kamagrapotenzmittel.com/# Kamagra Oral Jelly

  6. Malcolmseern表示:

    Apotheek Max Apotheek Max Apotheek Max

  7. Derekgroum表示:

    Beste online drogist: Apotheek Max – Apotheek Max

  8. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем:ремонт крупногабаритной техники в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  9. Derekgroum表示:

    apotek online: apotek pa nett – Apoteket online

  10. HomerFaw表示:

    https://kamagrapotenzmittel.shop/# Kamagra Oral Jelly

  11. Michaeltor表示:

    Online apotheek Nederland zonder recept: online apotheek – Beste online drogist

  12. Malcolmseern表示:

    kamagra kamagra Kamagra kaufen

  13. Исследуйте мир на sofisimo.com, полезные ресурсы.
    Не пропустите возможности, которые предлагает sofisimo.com, актуальные темы.
    sofisimo.com – ключ к вашему развитию, ищите.
    sofisimo.com – остров знаний, вас удивят.
    sofisimo.com – ваш помощник в обучении, находя новые знания.
    Станьте частью сообщества на sofisimo.com, где.
    sofisimo.com – это источник креативности, для тех, кто.
    Посетите sofisimo.com для открытия новых возможностей, ваши возможности.
    Путешествие начинается на sofisimo.com, расти.
    sofisimo.com – это больше, чем просто сайт, чему-то новому.
    sofisimo.com: уникальный контент для всех, что-то для себя.
    Пользуйтесь ресурсами sofisimo.com каждый день, учиться.
    Свяжитесь с сообществом на sofisimo.com, идеи.
    Выберите sofisimo.com для новизны, старается.
    Узнайте секреты успеха на sofisimo.com, вам необходим.
    sofisimo.com – это ваша платформа, ключ к успеху для всех.
    Присоединяйтесь к нам на sofisimo.com, ваши мечты становятся реальностью.
    Собирайте идеи на sofisimo.com, каждый день новые открытия.
    sofisimo.com: место, где встречаются идеи, развивать свои навыки.
    cajones para cocina https://sofisimo.com/ .

  14. Malcolmseern表示:

    Beste online drogist Beste online drogist Beste online drogist

  15. HomerFaw表示:

    https://kamagrapotenzmittel.shop/# Kamagra kaufen ohne Rezept

  16. Derekgroum表示:

    Apotek hemleverans idag: apotek online recept – Apotek hemleverans recept

  17. Michaeltor表示:

    Kamagra Oral Jelly kaufen: Kamagra Original – Kamagra Oral Jelly kaufen

  18. Michaeltor表示:

    apotek online: apotek online – apotek online

  19. Its like you read my mind! You seem to know a lot about this, like you wrote the book in it or something. I think that you could do with some pics to drive the message home a bit, but instead of that, this is magnificent blog. A fantastic read. I’ll certainly be back.

  20. Louislen表示:

    http://kamagrapotenzmittel.com/# Kamagra Oral Jelly kaufen

  21. Derekgroum表示:

    Apotek hemleverans recept: apotek online – Apotek hemleverans recept

  22. Louislen表示:

    http://apotekonlinerecept.com/# apotek online recept

  23. HomerFaw表示:

    http://apotheekmax.com/# de online drogist kortingscode

發佈回覆給「Michaeltor」的留言 取消回覆

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