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

3,412 Responses

  1. Johnnyden表示:

    stromectol for sale ivermectin without a doctor prescription ivermectin without a doctor prescription

  2. vgckrzof表示:

    order modafinil 100mg online purchase provigil without prescription

  3. Johnnyden表示:

    stromectol without a doctor prescription stromectol pills for humans stromectol 3 mg tablets price

  4. tamnkzjm表示:

    modafinil 100mg ca buy provigil 100mg pills buy provigil 100mg online

  5. amequy表示:

    EasyGolf ScorecardViewer provides the golfers’ scorecards in a variety of forms (the printable kind, excel and PDF formats). The program allows to track all the wins, losses, handicaps, delta, ovals, uniforms, courses and anything else your golf organization cares about. There’s also a weekly ranking report, an exclusive ranking of your players’ performance, a lesson plan builder, an in-course statistic sheet, an invitational analysis, a tour profile https://wakelet.com/wake/dzrO1BfvO1-iRHkQlhOqD 8cee70152a amequy

  6. ulidara表示:

    Note that this Might Not Work Until Offline

    ** **

    provided a history and a treatment for a condition not in existence when Jacob Van Cleef was tested. Accordingly, the Company argues that the condition is not covered by the Plan because Jacob Van Cleef had both at the time of his disability. The material force of this argument has already been disposed of. The Company’s treatment of this issue was recognized by the Secretary when he recommended acceptance of the Plan.
    [6 https://wakelet.com/wake/jls9egU7FUdWXkRv6i3UM 8cee70152a ulidara

  7. Johnnyden表示:

    buy clomid 50mg online buy clomid 50mg clomid for sale

  8. glenfau表示:

    Unfortunately, you can’t export selected photos as ROI, just as when doing Google image search. Another negating factor is the simple interface, which makes it rather hard to work with for newbies. Everything being said, we can’t look beyond the drawbacks and need to consider this software a tool of the basic kind. to the dentist, too. It could likely ruin your chances to get information that is vital for your oral health. That is the reason, visit to https://hyvsi.com/upload/files/2022/05/wqMIXhZ59qXm5uge7fsI_19_908a1fc1e4b1c1a16332b15b0d085261_file.pdf 05e1106874 glenfau

  9. Mfcwjw表示:

    ceftin 500mg canada – buy ceftin 250mg pills buy tadalafil 5mg generic

  10. zehclvkb表示:

    buy modafinil 100mg pills purchase provigil online

  11. lewhmjmq表示:

    buy modafinil 100mg without prescription order modafinil online cheap provigil order online

  12. hisjus表示:

    The real question that the above program can’t answer is, “why should I use it, as other data recovery software can do the same thing?” The simple explanation is that the program it runs on is free of cost and based on open-source code.
    The great thing is that the app will not show ads, or spam your phone’s memory, which is something I’ve seen on similar software.

    NEZPlug for iOS 11 was extracted as a standalone application https://www.girisimhaber.com/redirect.aspx?url=https://fortdealdujul.weebly.com

    6add127376 hisjus

  13. dehlchri表示:

    It can also monitor the internet activity of employees at an organization or individuals, managing a global access control list. The program supports all kinds of proxy servers and remote web servers and all popular Active Directory user groups.
    In addition, Internet Access Monitor Ositis WinProxy is an excellent feature rich asset tracking software module, that can easily be incorporated into any network monitoring system such as Cacti, BMS, Zabbix, Nagios, Splunk, etc.
    ==============
    License https://comnuzzgelu.weebly.com

    6add127376 dehlchri

  14. wanhaz表示:

    Its features are combined in a responsive and easy-to-use application that won’t take much space on the hard disk.
    URLProtocolView can be used as a portable program, and its context menu makes it possible to run without installation as well.
    You can take a look at URLProtocolView on VirusTotal to check if it is free from any form of threats.
    URLProtocolView application was coded by PieDroid and is available to all premium members. https://vestwednici.weebly.com

    6add127376 wanhaz

  15. foofry表示:

    It’s quite good for those who need to make math calculations from time to time but don’t want to invest too much time and effort to learn how to use it.

    Easy to install (USB/SD/CD).
    No registry settings.
    Two types of reporting: smooth curve is built in (don’t remember RMS measurements), through tests into Soundcard.
    When graphing with smooth curve, you can choose between either RMS, Peak FFT or https://mp.weicun.qq.com/util/url/index?url=https://turnrelosubs.weebly.com

    6add127376 foofry

  16. sanlaur表示:

    Besides the desktop background it is possible to install a special folder background or a desktop clock.

    This is a little desktop hello kitty, and it’s styled like a friends and family greeting card. It’s a very popular card image, so it’s hand drawn! It works perfectly on XP, Vista, 2007 and 2008.

    Packard Bell CD-RW BIOS Utility (BIU) Wizard is designed to provide a simple step-by-step guide to install, test, https://precbeauprevle.weebly.com

    6add127376 sanlaur

  17. beyhanna表示:

    Despite all these gripes, the program is a game changer for media consumers because SPEEDbit Video Downloader and Converter may do well too many tasks currently accessible only by high-end programs.
    Therefore, SPEEDbit Video Downloader and Converter is a good choice for users looking for a simple, but handy video downloading and renaming tool.

    Price: Free

    Freeware | 5.5 MB | 8 MS

    Partnership Image Viewer http://assertivenorthwest.com/?URL=https://dehalisa.weebly.com

    6add127376 beyhanna

  18. beneldr表示:

    UnidenCommander has support for many other Uniden radio scanners, including but not limited to: UBC785LT, UBC790LT (except for the XT1000 and ETH-3000 models), the UBC-2000, UBC-3000, UBC-3000XM, UBC-350, UBC7000, UBC-750, UBC-1000, UBC-2000-LT, UBC-2000-LD, UBC-1100, U https://flutcanafe.weebly.com

    6add127376 beneldr

  19. kerbphil表示:

    And it doesn’t generate any permanent files, so you won’t have any problems with space or privacy. You may however face compatibility issues with malware, if you rely on old software, take non-compatible updates, and so on. Therefore, it’s recommended you experiment it on a test environment first and, if you find it useful, continue your production phase on a dedicated system. Having said all of that, the application still an effective tool for Clipboard tracking in most cases, no matter the https://tintarasub.weebly.com

    6add127376 kerbphil

  20. sadhfron表示:

    Constant Depth Of Field (CDOF) is a free and open source utility developed by the producer of the older version, Antojit to mainly automate camera configurations among a single camera, up to a multiple camera system including a lens, an autofocus module, and an LCD monitor.
    Several manual operations can be easily and efficiently performed with the help of the smart tool, including, but not limited to, changing settings, d-logging, log file creation, autof http://timemapper.okfnlabs.org/view?url=https://suiputtiera.weebly.com

    6add127376 sadhfron

  21. narnave表示:

    Q:

    How to deliver code without giving any key ( production android)?

    I need to deliver complete project, its related to some cryptography and therefore, it requires key to generate the keystore and so on. My question is that how to deliver the project without giving any key?

    A:

    Assume you have a password and that you have the correct source code. You can retrieve the same encrypted key from the app source code.
    int encryptionKey = get https://traslepsracthei.weebly.com

    6add127376 narnave

  22. fertkaes表示:

    Marketing is often the hardest part for every business. So marketing your brand and business becomes your number one concern. Your brand is the entire picture of your business. It is how you are perceived by the general public. A logo is also a part of your brand. So a logo needs to complement the entire marketing strategy of your business.

    A custom logo design can add a touch of magic to the business as a whole. So here are some of the ways you can use a logo https://remicgaterf.weebly.com

    6add127376 fertkaes

發佈留言

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