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

7,194 Responses

  1. IgnacioSlima表示:

    pharmacie en ligne fiable: levitra generique – Pharmacie sans ordonnance

  2. Fitspresso表示:

    You are my inspiration, I have few blogs and often run out from post :). “Yet do I fear thy nature It is too full o’ the milk of human kindness.” by William Shakespeare.

  3. Allenacurf表示:

    acheter mГ©dicament en ligne sans ordonnance: acheter kamagra site fiable – Pharmacie en ligne livraison Europe

  4. Allenacurf表示:

    pharmacie en ligne sans ordonnance: Pharmacies en ligne certifiees – п»їpharmacie en ligne france

  5. IgnacioSlima表示:

    Viagra homme sans ordonnance belgique: Viagra sans ordonnance 24h – Meilleur Viagra sans ordonnance 24h

  6. Allenacurf表示:

    pharmacie en ligne france fiable: pharmacie en ligne – acheter mГ©dicament en ligne sans ordonnance

  7. Excellent read, I just passed this onto a colleague who was doing a little research on that. And he actually bought me lunch as I found it for him smile Therefore let me rephrase that: Thank you for lunch! “He who walks in another’s tracks leaves no footprints.” by Joan Brannon.

  8. Allenacurf表示:

    pharmacie en ligne france pas cher: cialis prix – pharmacie en ligne france livraison internationale

  9. Allenacurf表示:

    Pharmacie en ligne livraison Europe: pharmacie en ligne – Pharmacie Internationale en ligne

  10. IgnacioSlima表示:

    pharmacie en ligne pas cher: kamagra 100mg prix – trouver un mГ©dicament en pharmacie

  11. fitspresso表示:

    Hello my loved one! I want to say that this article is awesome, great written and come with approximately all significant infos. I¦d like to look extra posts like this .

  12. When I originally commented I clicked the -Notify me when new comments are added- checkbox and now each time a comment is added I get four emails with the same comment. Is there any way you can remove me from that service? Thanks!

  13. Allenacurf表示:

    Meilleur Viagra sans ordonnance 24h: viagra en ligne – Viagra sans ordonnance 24h

  14. Umxnab表示:

    priligy violet – dapoxetine master priligy hedge

  15. Allenacurf表示:

    п»їpharmacie en ligne france: Levitra acheter – pharmacie en ligne sans ordonnance

  16. EdwardGROOM表示:

    pharmacie en ligne sans ordonnance: Medicaments en ligne livres en 24h – Pharmacie sans ordonnance

  17. IgnacioSlima表示:

    acheter mГ©dicament en ligne sans ordonnance: Levitra pharmacie en ligne – pharmacie en ligne france fiable

  18. Allenacurf表示:

    Achat mГ©dicament en ligne fiable: Levitra pharmacie en ligne – pharmacie en ligne france livraison belgique

  19. EdwardGROOM表示:

    pharmacie en ligne pas cher: pharmacie en ligne livraison europe – Achat mГ©dicament en ligne fiable

  20. RobertBlica表示:

    https://viaenligne.com/# Viagra homme prix en pharmacie sans ordonnance

  21. Znrbqm表示:

    claritin pills mark – claritin pills screen loratadine season

  22. eft cheats表示:

    Hello, you used to write fantastic, but the last few posts have been kinda boring? I miss your tremendous writings. Past few posts are just a little bit out of track! come on!

  23. Usata表示:

    The odds for the 2024 NASCAR Cup Series title have been updated following the Food City 500 at Bristol Motor Speedway over the weekend. Coming off his best finish of the season at the Players Championship, Brian Harman is now headed to a course that has routinely stumped him during his career. The Wildcats play the Oakland Golden Grizzlies, starting at 7:10 PM ET on Thursday, March 21 in the First Round. Kentucky is a 13.5-point favorite, with the over under set at 162.5. Gaining stature over the years, the Championship attracts a global fanbase and bettors’ attention. Reflecting the league’s dynamic nature, the championship`s betting odds create opportunities for any team to contend for promotion. Sep 11: Georgia’s SEC Championship odds shortened to -132 after the Bulldogs throttled Ball State in Week 2, while Alabama’s odds lengthened to +316 after losing to Texas as touchdown favorites.
    http://knj11.com/board/bbs/board.php?bo_table=free&wr_id=9430
    Apart from the initial welcome bonus, punters engaging with Babu88 in Bangladesh can anticipate a variety of additional bonuses and rewards. To gain a detailed understanding of these diverse bonuses, take a glance at the informative table provided below. This comprehensive resource ensures that users have a detailed overview of the multitude of bonuses and rewards available, enriching their overall gaming experience on Babu88. Dafabet is a reputable online betting company that operates in Asia and offers a range of sports betting, online casino, live casino, and arcade games. Dafabet has been in the industry since 2004 and is licensed by Curacao. Dafabet provides a secure and convenient betting experience with competitive odds, fast payouts, and generous bonuses. You can also access Dafabet’s services through its mobile app and website.

  24. Usata表示:

    You can email the site owner to let them know you were blocked. Please include what you were doing when this page came up and the Cloudflare Ray ID found at the bottom of this page. Tommy Fleetwood hasn’t won yet this year and has been a bit on the inconsistent side. He’s missed the cut in two of his last five outings but also earned a top-five finish in each of the other three—he finished second to Nick Taylor in the RBC Canadian Open via a playoff. bet365 is undoubtedly a top golf betting and PGA Tour odds destination for several reasons. However, before digging in even further, we suggest that you pounce on the best bet365 Bonus Code in the online sportsbook promo code business. But simply betting Scheffler in the top ten may be short-changing yourself in the odds. He’s actually finished top-five in seven straight tournaments and top-three in five of those seven. A bet on Scheffler to be top ten in the Scottish Open is priced at -140 at DraftKings and a top-five bet comes in at +150 odds.
    https://magicline.kr/bbs/board.php?bo_table=free&wr_id=10393
    Amanda Nunes will face off with Megan Anderson at UFC 259 on Saturday, March 6, 2021. The opening line has Nunes coming in at -1050 while Anderson is coming in at +675. UFC 300 will take place in 2024 with some of MMA’s best including Charles Oliveira and Max Holloway se to compete Amanda Nunes is the current bantamweight and featherweight champion, but if there is a time she loses, it is this fight. Her partner, Nina Ansaroff just had a baby, and training with a newborn is tough. Anderson is a legit featherweight and has the ability to use her size and power to outstrike Nunes. Ourselves and the MMA community on a whole would be quite surprised to see the result go any way other than a win for Nunes – whether she looks to get out quick or do what’s she’s done of late, go the full five rounds and look like she’s got room for another five in the tank.

  25. Usata表示:

    Terms and Conditions I’ve taken swings on a number of big longshots and finish position bets along with leading contenders Tommy Fleetwood, Tyrrell Hatton, Shane Lowry, Viktor Hovland to complete my foursome. Other storylines include British Open qualifier Alex Fitzpatrick (-4) outdueling his brother Matt Fitzpatrick (-2), who is ranked No. 9 in the world. Those two shot 65 and 67. And 1000 1 major longshot Shubhanker Sharma (-4), ranked No. 276 in the world, is tied for 9th and in position for a high finish to be able to return to next year’s Open Championship without qualifying. Gannett may earn revenue from sports betting operators for audience referrals to betting services. Sports betting operators have no influence over nor are any such revenues in any way dependent on or linked to the newsrooms or news coverage. See operator site for Terms and Conditions. If you or someone you know has a gambling problem, help is available. Call the National Council on Problem Gambling 24 7 at 1-800-GAMBLER. Must be 21 or older to gamble. See Tipico for latest odds, odds in this article may not reflect currently available markets.
    https://gunnertsqm371916.bloggerswise.com/32821301/co-online-sports-betting-sites
    The Babu88 project was built on the foundation of a single ambition – to deliver Bangladeshi customers high-quality gaming and betting experiences. We are confident that you will be delighted by the variety of betting options we offer and our outstanding service and advantageous bonuses. At present, visitors at the official Babu88 website can place wagers on numerous sports disciplines, while the online casino provides a selection of hundreds of slots, table games and live dealer entertainment.  This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.

  26. IgnacioSlima表示:

    Achat mГ©dicament en ligne fiable: Levitra acheter – pharmacies en ligne certifiГ©es

  27. Allenacurf表示:

    Pharmacie sans ordonnance: levitra en ligne – п»їpharmacie en ligne france

  28. Allenacurf表示:

    п»їpharmacie en ligne france: cialis generique – acheter mГ©dicament en ligne sans ordonnance

  29. IgnacioSlima表示:

    Meilleur Viagra sans ordonnance 24h: Viagra generique en pharmacie – Viagra femme ou trouver

  30. XRumer23obliz表示:

    Hello.

    This post was created with XRumer 23 StrongAI.

    Good luck 🙂

發佈留言

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