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

  1. Testament to The expertise and hard work, or The ability to make me feel utterly unaccomplished.

  2. RobertSax表示:

    https://autolux-azerbaijan.com/# Pin up 306 casino

  3. Krista Fronce表示:

    A refreshing take on the subject, like a cool breeze on a hot day. I’m all ears for what you have to say next.

  4. Jerrie Amiri表示:

    The knack for making hard to understand concepts readable is something I greatly admire.

  5. Edwarddig表示:

    pin-up360: pin-up360 – Pin Up

  6. Puravive表示:

    Hi my family member! I wish to say that this article is amazing, nice written and come with almost all significant infos. I would like to see more posts like this .

  7. Hey! I’m at work surfing around your blog from my new iphone 4! Just wanted to say I love reading through your blog and look forward to all your posts! Carry on the fantastic work!

  8. Always learning something new here, because apparently, I didn’t pay enough attention in school.

  9. Incredibly helpful post, like a GPS for my lost thoughts.

  10. Hi there, just became alert to your blog through Google, and found that it’s truly informative. I am going to watch out for brussels. I?ll be grateful if you continue this in future. Many people will be benefited from your writing. Cheers!

  11. rtp aminototo表示:

    I’m now not sure where you’re getting your info, however great topic. I must spend a while finding out more or working out more. Thanks for excellent info I was looking for this information for my mission.

  12. I admire the way you tackled this hard to understand issue. Very enlightening!

  13. You have a gift for explaining things in an understandable way. Thank you!

  14. This is very interesting, You’re a very skilled blogger. I have joined your rss feed and look forward to seeking more of your magnificent post. Also, I’ve shared your web site in my social networks!

  15. I have been exploring for a bit for any high-quality articles or weblog posts in this sort of area . Exploring in Yahoo I finally stumbled upon this site. Studying this information So i?¦m glad to exhibit that I have a very just right uncanny feeling I found out exactly what I needed. I most indisputably will make certain to don?¦t disregard this site and provides it a glance regularly.

  16. The creativity and intelligence shine through, blinding almost, but I’ll keep my sunglasses handy.

  17. Most comprehensive article on this topic. I guess internet rabbit holes do pay off.

  18. Great weblog right here! Also your website a lot up fast! What web host are you the usage of? Can I get your affiliate hyperlink to your host? I wish my web site loaded up as quickly as yours lol

  19. Great V I should certainly pronounce, impressed with your website. 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 in the least. Reasonably unusual. Is likely to appreciate it for those who add forums or something, site theme . a tones way for your customer to communicate. Nice task..

發佈留言

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