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

5,833 Responses

  1. Gregorypurne表示:

    ed tablets https://drugs24.pro/# help with ed

  2. BrandonJer表示:

    mexican online pharmacies prescription drugs mexican rx online mexican online pharmacies prescription drugs

  3. AgustinBougs表示:

    https://indianpharmdelivery.com/# п»їlegitimate online pharmacies india
    online pharmacy india

  4. RichardThini表示:

    п»їlegitimate online pharmacies india: indian pharmacy paypal – pharmacy website india

  5. Ogfgso表示:

    brand clindamycin – where can i buy cleocin buy indocin online cheap

  6. DennisKah表示:

    reputable mexican pharmacies online: reputable mexican pharmacies online – reputable mexican pharmacies online

  7. BrandonJer表示:

    mexican drugstore online mexico drug stores pharmacies buying from online mexican pharmacy

  8. RichardThini表示:

    the best ed pills: herbal ed – prescription drugs canada buy online

  9. AgustinBougs表示:

    https://mexicanpharm24.pro/# mexico pharmacies prescription drugs
    Online medicine order

  10. Gregorypurne表示:

    ed prescription drugs https://mexicanpharm24.pro/# mexican drugstore online

  11. BrandonJer表示:

    erectyle disfunction carprofen without vet prescription drugs online

  12. RichardThini表示:

    men with ed: natural herbs for ed – natural ed

  13. франшиза купить готовый бизнес франшиза купить готовый бизнес .

  14. открыть франшизу открыть франшизу .

  15. BrandonJer表示:

    buy drug online natural ed treatments best ed treatment

  16. AgustinBougs表示:

    https://indianpharmdelivery.com/# top 10 online pharmacy in india
    indian pharmacy

  17. Server-Xevil表示:

    Недорогой антиабузный server/ВПС/ВДС под парсинг, постинг, разгадывание каптчи.

    https://t.me/s/server_xevil_xrumer_vpsvds_zenno

    Сервер для Xrumer |Xevil | GSA | Xneolinks | A-parser | ZennoPoster | BAS | Антидетект браузер Dolphin

    – Быстрые серверы с NVMe.
    – Windows – 2022, 2019, 2016, 2012 R2
    – Супер (аптайм, скорость, пинг, нагрузка)
    – Отлично подходит под CapMonster
    – Возможность арендовать сервер на 1 час или 1 сутки
    – Windows – 2012 R2, 2016, 2019, 2022 – бесплатно
    – Управляйте серверами на лету.
    – Отлично подходит под A-Parser
    – Мгновенное развёртывание сервера в несколько кликов – бесплатно
    – Outline VPN, WireGuard VPN, IPsec VPN.
    – Для сервера сеть на скорости 1 Гбит!
    – Отлично подходит под GSA Search Engine Ranker
    – Скорость порта подключения к сети интернет — 1000 Мбит/сек
    – Почасовая оплата
    – Дата-центр в Москве и Амстердаме
    – Отлично подходит под Xneolinks
    – Автоматическая установка Windows – бесплатно
    – Ubuntu, Debian, CentOS, Oracle 9 – бесплатно
    – FASTPANEL и HestiaCP – бесплатно
    – Круглосуточная техническая поддержка – бесплатно
    – Отлично подходит под XRumer + XEvil
    – Более 15 000 сервер уже в работе

  18. Server-Xevil表示:

    Абузоустойчивый сервер/ВПС/ВДС под парсинг, постинг, разгадывание каптчи.

    https://t.me/s/server_xevil_xrumer_vpsvds_zenno

    Сервер для Xrumer |Xevil | GSA | Xneolinks | A-parser | ZennoPoster | BAS | Антидетект браузер Dolphin

    – Почасовая оплата
    – Более 15 000 сервер уже в работе
    – FASTPANEL и HestiaCP – бесплатно
    – Windows – 2022, 2019, 2016, 2012 R2
    – Автоматическая установка Windows – бесплатно
    – Отлично подходит под A-Parser
    – Мгновенное развёртывание сервера в несколько кликов – бесплатно
    – Отлично подходит под CapMonster
    – Windows – 2012 R2, 2016, 2019, 2022 – бесплатно
    – Управляйте серверами на лету.
    – Ubuntu, Debian, CentOS, Oracle 9 – бесплатно
    – Для сервера сеть на скорости 1 Гбит!
    – Outline VPN, WireGuard VPN, IPsec VPN.
    – Скорость порта подключения к сети интернет — 1000 Мбит/сек
    – Отлично подходит под GSA Search Engine Ranker
    – Супер (аптайм, скорость, пинг, нагрузка)
    – Возможность арендовать сервер на 1 час или 1 сутки
    – Быстрые серверы с NVMe.
    – Дата-центр в Москве и Амстердаме
    – Отлично подходит под Xneolinks
    – Отлично подходит под XRumer + XEvil
    – Круглосуточная техническая поддержка – бесплатно

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

  20. Ipliyd表示:

    purchase augmentin without prescription – buy synthroid 100mcg sale buy levothyroxine without a prescription

  21. Ремонт телефонов表示:

    Профессиональный сервисный центр сервис по ремонту телефонов номер ремонт телефона

  22. Server-Xrumer表示:

    Выделенный server/ВПС/ВДС под парсинг, постинг, разгадывание каптчи.

    https://t.me/s/server_xevil_xrumer_vpsvds_zenno

    Сервер для Xrumer |Xevil | GSA | Xneolinks | A-parser | ZennoPoster | BAS | Антидетект браузер Dolphin

    – Ubuntu, Debian, CentOS, Oracle 9 – бесплатно
    – Отлично подходит под CapMonster
    – Более 15 000 сервер уже в работе
    – Автоматическая установка Windows – бесплатно
    – FASTPANEL и HestiaCP – бесплатно
    – Отлично подходит под GSA Search Engine Ranker
    – Отлично подходит под A-Parser
    – Windows – 2022, 2019, 2016, 2012 R2
    – Отлично подходит под Xneolinks
    – Мгновенное развёртывание сервера в несколько кликов – бесплатно
    – Почасовая оплата
    – Дата-центр в Москве и Амстердаме
    – Управляйте серверами на лету.
    – Супер (аптайм, скорость, пинг, нагрузка)
    – Для сервера сеть на скорости 1 Гбит!
    – Отлично подходит под XRumer + XEvil
    – Windows – 2012 R2, 2016, 2019, 2022 – бесплатно
    – Круглосуточная техническая поддержка – бесплатно
    – Быстрые серверы с NVMe.
    – Outline VPN, WireGuard VPN, IPsec VPN.
    – Возможность арендовать сервер на 1 час или 1 сутки
    – Скорость порта подключения к сети интернет — 1000 Мбит/сек

  23. RichardThini表示:

    pharmacy website india: cheapest online pharmacy india – п»їlegitimate online pharmacies india

  24. Server-Xrumer表示:

    Быстрый server/ВПС/ВДС под парсинг, постинг, разгадывание каптчи.

    https://t.me/s/server_xevil_xrumer_vpsvds_zenno

    Сервер для Xrumer |Xevil | GSA | Xneolinks | A-parser | ZennoPoster | BAS | Антидетект браузер Dolphin

    – Для сервера сеть на скорости 1 Гбит!
    – Возможность арендовать сервер на 1 час или 1 сутки
    – Скорость порта подключения к сети интернет — 1000 Мбит/сек
    – Быстрые серверы с NVMe.
    – FASTPANEL и HestiaCP – бесплатно
    – Windows – 2012 R2, 2016, 2019, 2022 – бесплатно
    – Дата-центр в Москве и Амстердаме
    – Почасовая оплата
    – Отлично подходит под A-Parser
    – Отлично подходит под Xneolinks
    – Круглосуточная техническая поддержка – бесплатно
    – Отлично подходит под CapMonster
    – Мгновенное развёртывание сервера в несколько кликов – бесплатно
    – Отлично подходит под XRumer + XEvil
    – Отлично подходит под GSA Search Engine Ranker
    – Outline VPN, WireGuard VPN, IPsec VPN.
    – Более 15 000 сервер уже в работе
    – Автоматическая установка Windows – бесплатно
    – Супер (аптайм, скорость, пинг, нагрузка)
    – Управляйте серверами на лету.
    – Windows – 2022, 2019, 2016, 2012 R2
    – Ubuntu, Debian, CentOS, Oracle 9 – бесплатно

  25. Server-Xevil表示:

    Быстрый сервер/ВПС/ВДС под парсинг, постинг, разгадывание каптчи.

    https://t.me/s/server_xevil_xrumer_vpsvds_zenno

    Сервер для Xrumer |Xevil | GSA | Xneolinks | A-parser | ZennoPoster | BAS | Антидетект браузер Dolphin

    – Мгновенное развёртывание сервера в несколько кликов – бесплатно
    – Для сервера сеть на скорости 1 Гбит!
    – Более 15 000 сервер уже в работе
    – Возможность арендовать сервер на 1 час или 1 сутки
    – Супер (аптайм, скорость, пинг, нагрузка)
    – Автоматическая установка Windows – бесплатно
    – Скорость порта подключения к сети интернет — 1000 Мбит/сек
    – Почасовая оплата
    – Круглосуточная техническая поддержка – бесплатно
    – Отлично подходит под XRumer + XEvil
    – Дата-центр в Москве и Амстердаме
    – Windows – 2012 R2, 2016, 2019, 2022 – бесплатно
    – Отлично подходит под GSA Search Engine Ranker
    – Отлично подходит под A-Parser
    – Быстрые серверы с NVMe.
    – Управляйте серверами на лету.
    – Ubuntu, Debian, CentOS, Oracle 9 – бесплатно
    – Отлично подходит под Xneolinks
    – FASTPANEL и HestiaCP – бесплатно
    – Outline VPN, WireGuard VPN, IPsec VPN.
    – Отлично подходит под CapMonster
    – Windows – 2022, 2019, 2016, 2012 R2

  26. Server-Xevil表示:

    Аренда безабузный серак/ВПС/ВДС под парсинг, постинг, разгадывание каптчи.

    https://t.me/s/server_xevil_xrumer_vpsvds_zenno

    Сервер для Xrumer |Xevil | GSA | Xneolinks | A-parser | ZennoPoster | BAS | Антидетект браузер Dolphin

    – Ubuntu, Debian, CentOS, Oracle 9 – бесплатно
    – Отлично подходит под GSA Search Engine Ranker
    – Windows – 2022, 2019, 2016, 2012 R2
    – Windows – 2012 R2, 2016, 2019, 2022 – бесплатно
    – FASTPANEL и HestiaCP – бесплатно
    – Быстрые серверы с NVMe.
    – Супер (аптайм, скорость, пинг, нагрузка)
    – Скорость порта подключения к сети интернет — 1000 Мбит/сек
    – Управляйте серверами на лету.
    – Мгновенное развёртывание сервера в несколько кликов – бесплатно
    – Более 15 000 сервер уже в работе
    – Автоматическая установка Windows – бесплатно
    – Отлично подходит под CapMonster
    – Дата-центр в Москве и Амстердаме
    – Для сервера сеть на скорости 1 Гбит!
    – Отлично подходит под XRumer + XEvil
    – Outline VPN, WireGuard VPN, IPsec VPN.
    – Отлично подходит под A-Parser
    – Круглосуточная техническая поддержка – бесплатно
    – Отлично подходит под Xneolinks
    – Возможность арендовать сервер на 1 час или 1 сутки
    – Почасовая оплата

  27. BrandonJer表示:

    buy ed pills best drugs for erectile dysfunction canadian pharmacy online

發佈留言

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