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

4,801 Responses

  1. Thanks a lot for sharing this with all of us you really know what you are talking about! Bookmarked. Kindly also visit my site =). We could have a link exchange arrangement between us!

  2. Thanks for giving your ideas on this blog. Likewise, a fable regarding the banking companies intentions whenever talking about property foreclosure is that the bank will not have my payments. There is a fair bit of time that this bank will require payments from time to time. If you are far too deep within the hole, they’ll commonly call that you pay the particular payment 100 . However, i am not saying that they will not take any sort of payments at all. If you and the standard bank can manage to work one thing out, the foreclosure approach may halt. However, in the event you continue to pass up payments in the new plan, the foreclosure process can pick up from where it was left off.

  3. Hey! Someone in my Facebook group shared this website with us so I came to give it a look. I’m definitely loving the information. I’m book-marking and will be tweeting this to my followers! Exceptional blog and fantastic design.

  4. My partner and I stumbled over here by a different web address and thought I might check things out. I like what I see so i am just following you. Look forward to exploring your web page repeatedly.

  5. Heya i?m for the first time here. I found this board and I find It truly useful & it helped me out a lot. I hope to give something back and help others like you aided me.

  6. Hey! This post could not be written any better! Reading through this post reminds me of my previous room mate! He always kept talking about this. I will forward this page to him. Pretty sure he will have a good read. Thank you for sharing!

  7. I’m really impressed with your writing skills as well as with the layout on your blog. Is this a paid theme or did you modify it yourself? Either way keep up the nice quality writing, it?s rare to see a great blog like this one these days..

  8. Fzcnfa表示:

    purchase celecoxib generic – order generic celebrex indocin without prescription

  9. JesusLealt表示:

    en iyi slot siteleri: canl? slot siteleri – deneme bonusu veren siteler

  10. Its such as you read my mind! You seem to understand a lot approximately this, like you wrote the ebook in it or something. I believe that you just could do with a few to drive the message house a little bit, but other than that, that is wonderful blog. An excellent read. I will certainly be back.

  11. Hey there just wanted to give you a brief heads up and let you know a few of the images aren’t loading properly. I’m not sure why but I think its a linking issue. I’ve tried it in two different internet browsers and both show the same results.

  12. Darrelherse表示:

    oyun siteleri slot: canl? slot siteleri – slot bahis siteleri

  13. This design is wicked! You definitely know how to keep a reader amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Excellent job. I really enjoyed what you had to say, and more than that, how you presented it. Too cool!

  14. I have been surfing online more than 3 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my view, if all site owners and bloggers made good content as you did, the net will be much more useful than ever before.

  15. JesusLealt表示:

    sweet bonanza slot demo: sweet bonanza slot – sweet bonanza free spin demo

  16. Prbcjw表示:

    cost colospa – order generic pletal 100 mg cilostazol for sale

  17. Excellent beat ! I wish to apprentice while you amend your site, how could i subscribe for a blog site? The account helped me a acceptable deal. I had been a little bit acquainted of this your broadcast provided bright clear concept

  18. KevinSounc表示:

    http://sweetbonanza.network/# sweet bonanza giris

  19. One thing I have actually noticed is the fact there are plenty of common myths regarding the lenders intentions any time talking about foreclosure. One delusion in particular is that often the bank needs to have your house. The financial institution wants your dollars, not your house. They want the money they loaned you having interest. Steering clear of the bank will draw any foreclosed final result. Thanks for your publication.

  20. Darrelherse表示:

    en iyi slot siteleri 2024: 2024 en iyi slot siteleri – canl? slot siteleri

  21. Great ? I should definitely pronounce, impressed with your web site. I had no trouble navigating through all the tabs and related information ended up being truly simple to do to access. I recently found what I hoped for before you know it at all. Quite unusual. Is likely to appreciate it for those who add forums or anything, site theme . a tones way for your customer to communicate. Nice task..

  22. excellent post, very informative. I wonder why the other specialists of this sector do not notice this. You must continue your writing. I’m confident, you have a great readers’ base already!

  23. Thanks for another informative website. Where else could I get that type of info written in such an ideal way? I have a project that I’m just now working on, and I have been on the look out for such info.

  24. JeremyPsymn表示:

    http://easyrxcanada.com/# legal canadian pharmacy online

發佈留言

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