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

  1. RobertPaync表示:

    Agb Mexico Pharm reputable mexican pharmacies online Agb Mexico Pharm

  2. MatthewTek表示:

    http://agbmexicopharm.com/# pharmacies in mexico that ship to usa

  3. ChesterFus表示:

    www india pharm: cheapest online pharmacy india – www india pharm

  4. Michaeltor表示:

    Apotek hemleverans recept: Apotek hemleverans idag – apotek pa nett

  5. Michaeltor表示:

    Apotek hemleverans idag: Apotek hemleverans recept – Apotek hemleverans recept

  6. At this moment I am going to do my breakfast, later than having my breakfast coming over again to read other news.|

  7. Derekgroum表示:

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

  8. HomerFaw表示:

    https://apotheekmax.com/# Apotheek Max

  9. Louislen表示:

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

  10. Derekgroum表示:

    apotek online recept: Apotek hemleverans idag – Apotek hemleverans idag

  11. Malcolmseern表示:

    apotek online recept apotek online recept Apotek hemleverans idag

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

  13. Amazing! Its truly amazing article, I have got much clear idea about from this paragraph.|

  14. ZacharyTat表示:

    Espectro de vibracion
    Sistemas de ajuste: clave para el rendimiento fluido y eficiente de las maquinarias.

    En el campo de la tecnología contemporánea, donde la rendimiento y la estabilidad del equipo son de gran trascendencia, los equipos de calibración juegan un rol esencial. Estos sistemas dedicados están concebidos para ajustar y regular piezas giratorias, ya sea en equipamiento de fábrica, vehículos de traslado o incluso en equipos caseros.

    Para los profesionales en mantenimiento de equipos y los especialistas, trabajar con aparatos de ajuste es esencial para garantizar el funcionamiento suave y estable de cualquier sistema dinámico. Gracias a estas opciones modernas innovadoras, es posible reducir notablemente las oscilaciones, el ruido y la presión sobre los soportes, mejorando la tiempo de servicio de elementos costosos.

    También importante es el función que juegan los equipos de calibración en la atención al cliente. El asistencia profesional y el mantenimiento regular usando estos equipos permiten dar asistencias de excelente estándar, aumentando la agrado de los consumidores.

    Para los propietarios de empresas, la financiamiento en estaciones de balanceo y detectores puede ser esencial para optimizar la eficiencia y rendimiento de sus equipos. Esto es principalmente significativo para los emprendedores que gestionan medianas y intermedias emprendimientos, donde cada punto importa.

    Por otro lado, los sistemas de calibración tienen una amplia uso en el área de la prevención y el control de calidad. Permiten detectar probables problemas, evitando intervenciones costosas y daños a los dispositivos. Además, los información extraídos de estos sistemas pueden aplicarse para mejorar sistemas y potenciar la presencia en buscadores de búsqueda.

    Las campos de implementación de los sistemas de ajuste comprenden múltiples áreas, desde la producción de vehículos de dos ruedas hasta el monitoreo de la naturaleza. No afecta si se refiere de grandes elaboraciones industriales o reducidos espacios domésticos, los sistemas de equilibrado son esenciales para asegurar un funcionamiento eficiente y sin presencia de interrupciones.

  15. Derekgroum表示:

    Online apotheek Nederland zonder recept: de online drogist kortingscode – ApotheekMax

  16. Michaeltor表示:

    kamagra: Kamagra Gel – Kamagra Original

  17. HomerFaw表示:

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

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

  19. Malcolmseern表示:

    Betrouwbare online apotheek zonder recept Online apotheek Nederland met recept ApotheekMax

  20. Derekgroum表示:

    kamagra: Kamagra Gel – Kamagra online bestellen

  21. Malcolmseern表示:

    Online apotheek Nederland zonder recept ApotheekMax ApotheekMax

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

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