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

  1. Would you be fascinated about exchanging hyperlinks?

  2. Clark Manhart表示:

    Thoughtful analysis that made me think, which is quite the feat these days.

  3. Reading The Writing is like finding the perfect song that I can’t stop listening to. Play it again?

  4. Hnlcmo表示:

    feldene 20mg cost – buy feldene 20 mg rivastigmine 6mg tablet

  5. Qjlbav表示:

    buy etodolac online cheap – pletal 100 mg cost pletal for sale online

  6. Dinogame.app表示:

    My programmer is trying to persuade me to move to .net from PHP. I have always disliked the idea because of the expenses. But he’s tryiong none the less. I’ve been using WordPress on various websites for about a year and am nervous about switching to another platform. I have heard fantastic things about blogengine.net. Is there a way I can transfer all my wordpress posts into it? Any help would be really appreciated!

  7. Provadent表示:

    Great write-up, I¦m regular visitor of one¦s web site, maintain up the excellent operate, and It’s going to be a regular visitor for a long time.

  8. What a compelling read! The arguments were well-presented and convincing.

  9. Brian Defide表示:

    The research depth is so evident, I almost thought this was a thesis defense.

  10. Zbsyor表示:

    dimenhydrinate generic – actonel 35mg without prescription order risedronate 35mg sale

  11. Lqgqkl表示:

    enalapril 5mg uk – order doxazosin 1mg generic order xalatan eye drops

  12. Top Stage Hypnotist for hire Kristian von Sponneck performs private stage hypnosis shows anywhere in the UK, Europe or worldwide. Hire hime for your next event!

  13. Thank you sharing these kinds of wonderful discussions. In addition, the perfect travel plus medical insurance program can often eliminate those worries that come with vacationing abroad. A new medical emergency can soon become extremely expensive and that’s bound to quickly impose a financial load on the family’s finances. Having in place the best travel insurance deal prior to setting off is definitely worth the time and effort. Cheers

  14. Hiya, I am really glad I have found this info. Today bloggers publish only about gossips and net and this is really irritating. A good blog with interesting content, that’s what I need. Thank you for keeping this website, I will be visiting it. Do you do newsletters? Cant find it.

  15. Fcjuci表示:

    brand fulvicin 250 mg – purchase lopid pills order gemfibrozil 300 mg for sale

  16. What Is FitSpresso? FitSpresso is a dietary supplement that is made to support healthy fat-burning in the body

  17. you’re really a good webmaster. The site loading speed is amazing. It seems that you’re doing any unique trick. Also, The contents are masterpiece. you’ve done a magnificent job on this topic!

  18. Rpfinc表示:

    buy forxiga 10 mg pills – pill forxiga buy generic acarbose

  19. vex表示:

    Yes, is the short answer. However, the exact legal status of 1xBet in India is unclear. While there’s no national law against online gambling, some states have restrictions. 1xBet’s international license might not be valid everywhere in India. Before using 1xBet, check your state’s gambling laws. Over the years, when it comes to online gambling, 1xBet Bangladesh has received a steady response from Bangladeshi customers. The bookmaker provides decent odds when it comes to cricket betting, as judged by 1xbet ratings.  To release and renew your IP address on a Mac, go to System Preferences… Send us images and details of the artworks you are looking to consign. Auctions are planned every month. Or send an email instead. When a user enters a URL in their web browser, DNS gets to work to connect that URL to the IP address of the actual server. This is called DNS name resolution and involves a DNS recursor querying various nameservers to figure out the actual IP address of a server.
    https://studybible.co.kr/bbs/board.php?bo_table=free&wr_id=39373
    The welcome bonus is given only once to a single person. It is understood that this uniqueness is reflected in all the information provided during registration and on the account number assigned by the bookmaker. Should a customer abuse this, 1xbet can simply close the customer’s account. The 1xBet promo code today: FINGER. By creating a new account, you will be eligible to receive their exceptional new customer welcome bonus of 130%, up to $130. 1xBet offers a wide range of gambling options, including Toto pool betting, cryptocurrency exchange, Asian games, backgammon, virtual sports, lottery games, bingo, fantasy, and TV games. By registering using the provided 1Xbet bonus code, users can take advantage of some of the most attractive offers available on the platform. Additionally, with the inclusion of a cryptocurrency exchange, 1xBet is well-positioned to facilitate deposit transactions using bitcoin and other digital currencies.

  20. Someone essentially help to make seriously posts I would state. This is the first time I frequented your web page and thus far? I surprised with the research you made to make this particular publish amazing. Wonderful job!

  21. Zen Cortex表示:

    I am really inspired along with your writing talents and also with the layout in your weblog. Is that this a paid topic or did you customize it your self? Anyway keep up the excellent quality writing, it’s uncommon to look a great blog like this one today..

  22. Nhsghu表示:

    order zovirax online cheap – generic eukroma purchase dydrogesterone pills

  23. fantastic post.Ne’er knew this, appreciate it for letting me know.

  24. Bclcdi表示:

    bactrim 960mg drug – keppra 1000mg without prescription buy tobramycin 10mg for sale

發佈留言

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