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

2,980 Responses

  1. RichardEnect表示:

    amoxicillin cost australia amoxicillin pharmacy price

  2. Vhamlt表示:

    valacyclovir price valtrex 1000mg price order fluconazole online

  3. Poubgo表示:

    buy generic ondansetron 4mg purchase zofran pill simvastatin price

  4. Vivienepisn表示:

    buying essays online
    us essay writing service
    college admission essay service

  5. PABAKAWLBIXsd表示:

    where to get lyrica can you buy cheap lyrica prices how to buy generic lyrica pill

  6. ascetacle表示:

    Red Wine In Moderation lasix blood thinner

  7. ascetacle表示:

    T2 and DCE MR images are useful in the assessment of cervical stromal invasion with a diagnostic accuracy of approximately 90 Fig lasix dose for chf

  8. Rickyjaick表示:

    https://buytadalafil.icu/# cost of generic tadalafil

  9. Weageby表示:

    The amount of aromasin you will need during PCT is pretty trivial since it s tapering off, so there really aren t any worries as far as side effects what happens when you stop taking lasix These side effects are usually a sign that your immune system is being activated

  10. Ginniepisn表示:

    college essay help
    who will write my essay
    top essay writing websites

  11. LABAKAWLBIXtk表示:

    pregabalin 75 mg for sale lyrica generic order lyrica 75 mg without prescription

  12. Wkcyjz表示:

    order generic mobic 15mg buy flomax 0.4mg sale buy tamsulosin 0.4mg for sale

  13. ascetacle表示:

    The differential diagnosis should include common alpha fetoprotein producing ovarian entities such as germ cell tumors, as well as other non germ cell tumors that have been rarely reported to produce this tumor marker can lasix cause diarrhea Minor 1 aprepitant will increase the level or effect of imatinib by affecting hepatic intestinal enzyme CYP3A4 metabolism

  14. Ginniepisn表示:

    college essay community service
    essay writers toronto
    order essay online cheap

  15. Weageby表示:

    The agency is seeking public comment on whether alimit could be set on the amount of menthol in cigarettes lasix hyponatremia mitotane decreases levels of oxycodone by affecting hepatic intestinal enzyme CYP3A4 metabolism

  16. Kszkfu表示:

    order levaquin 250mg online order dutasteride online order ranitidine generic

  17. DABAKAWLBIXor表示:

    neurontin cost order gabapentin pill gabapentin 400 mg pills

  18. Gcuwyp表示:

    nexium 40mg cheap purchase sumatriptan imitrex 25mg tablet

  19. Ginniepisn表示:

    compare and contrast essay help
    custom essays for cheap
    college application essay service

  20. VABAKAWLBIXho表示:

    order valsartan 160 mg pills order diovan 80 mg generic purchase diovan pill

  21. Cthrinepisn表示:

    cheap essay
    mba essay writing services
    help in writing essay

  22. Leilahpisn表示:

    essay writing services usa
    best writing essay
    essay writing helper

  23. Xappkm表示:

    methotrexate generic purchase metoclopramide sale cozaar 50mg without prescription

  24. Twylapisn表示:

    best college essay writing services
    fast custom essays
    who can write my essay for me

  25. Rsziia表示:

    order bupropion 150 mg online cheap purchase zyban without prescription sildenafil online buy

  26. Dronapisn表示:

    in an essay help you guide
    paid essay writers
    order custom essays online

  27. Charopisn表示:

    do my essay cheap
    buy an essay online
    essays writing service

  28. Zdzqcs表示:

    brand motrin 400mg mirtazapine 30mg generic buy calcitriol 0.25 mg generic

發佈回覆給「Cthrinepisn」的留言 取消回覆

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