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

  1. вывод из запоя в наркологическом стационаре вывод из запоя в наркологическом стационаре .

  2. JimmieTup表示:

    http://cytotec.top/# cytotec buy online usa

  3. ArmandoDat表示:

    cost clomid no prescription: cost of generic clomid no prescription – buy generic clomid without prescription

  4. RobertUnmab表示:

    lisinopril 5 mg price in india: cheap lisinopril – lisinopril 2019

  5. Jaimevoink表示:

    buy cipro no rx ciprofloxacin 500mg buy online ciprofloxacin

  6. YPUDXQF表示:

    Cabinet. Alphabet. Keno. Kidney stone. Good. Kingsman: secret service. Redding ca. Prime numbers. Kaka. FГєtbol club barcelona. Wilmington. Moniker. Iran. Acrylic. Central intelligence. Ncaa tournament. Step brothers. Sign language alphabet. Consolidate. Robert frost. Bermuda triangle. Human migration news. Matt dillon. Tnf. Mandolin. Difference between. Digital camera and. Philadelphia museum of art. Amitabh bachchan. Rip van winkle. Basset hound. Pervasive. Mad max fury road. Virgo dates. Prokaryotic cell. Succulent. Satyr. Faceb. Old english. Asthma. Netflic. Bristol myers squibb. Richard nixon. Morgan state university. Lakers vs memphis grizzlies match player stats. https://forum-261822.tv53.ru/
    Beginning. De. Plain. Barbie film. Pyramid. Bourbon street. Solar flares. Cast of asteroid city. Caesars palace. Tom berenger. Tarantula. Steph curry. James harden stats. Anton lavey. The simpsons. Offshore drilling. Deon sanders. Joke. Princess margaret. Ku. Recorder. Tenor. Dolly parton. Cape canaveral. Willow tree. Lewiston. Heron. Purchasing power parity. The price is right. French fries. Biosphere. Chanel. Emaciated. Hemlock. Poetic justice. Abduction. Conformity. White tiger. Minute. Quincy market. One flew over the cuckoos nest. How many. Fellatio. Pets. Bide. Hitachi. Agent orange. Marvin gaye. Rum. Shrimp. When was the constitution written. Virginia beach. Lisa marie presley. Tomorrow. Efficacy. Jeeps. Chinchilla. Mayor of new york city. Us states. Gcc. Melanin.

  7. ELISQXN表示:

    Algorithm. Delirium tremens. Amaozn. Newfoundland dog. The texas chainsaw massacre 1974. Magic. Acquisition. Available. Rhinovirus. TelГ©fono inteligente. Rosanna arquette. Tilda swinton. Antarctica. Cube. Sonny bono. Rifampin. Robert wagner. Porridge. Confidence interval. Kansas city chiefs game. Define. Dirk nowitzki. Hgh. Narnia. Feminine. Training day. Patrick dempsey. Fruit. Pueblo. Eazy-e. Maiden name. Presidential candidates 2024. Philly. Ardent. New moon. Thai. Norman rockwell. Anna wintour. Ferris bueller. St croix. Wirdle. Miranda lambert. Diary of a mad black woman. Martin sheen. Cigarettes. Lindsey graham. Affirmative action. Rustin. Diabolo meaning. Mash cast. Cavaliers. Hearst castle. My chemical romance. Carnegie mellon university. Lithosphere. The bronx. Turkish angora. https://id-313314.tv53.ru/
    French kiss. Underworld. Simpsons characters. The omen. Sugar cane. Barbados. Invaluable. Thunder game. Maned wolf. Donald glover. Paraplegic. Amelie. Hers. Donald trump jr.. Calisthenics workout. Dogfish. Nepal time. Phagocytosis. Miami seaquarium. X. Fight. Heimlich maneuver. Hershey. Puppy love. Potato bug. Persona. Pickleball. Norway. Parasite movie. Kingdom of heaven. Christian bale. J. robert oppenheimer. Qantas. September 11. Jigsaw puzzle. F-22. Frenchie. Cacao. Black and white. Morbid. Walnuts. Lauren ambrose. Koi. Mat. Whippets. Redd foxx. Antagonist. Library of congress. Sammy sosa. Pretty in pink cast. Ithaca. Leo dates. Macedonia. Sorghum. Pyrite. Bing crosby. Ronald reagan. July 4th. Julia. Chris hemsworth. Croissant. Vitamin b12. How many days in a year.

  8. IESOZBR表示:

    Steel magnolias. Tonsils. The women. Hamilton cast. Zidane. Sorghum. Cologne. When is eid. Steadfast. Leonard bernstein. New haven. Water. Travis kelce age. Cartagena colombia. Sam rockwell movies. Predestination. Postal code. Cleft palate. Ameliorate. Incredulous. Ford vs ferrari. Edmonton oilers. Drawings. Iron dome. Dianne feinstein. Voyeur. Sam shepard. Changeling. Lewis and clark. Conan obrien. Helen of troy. Times table. Chinese new year 2024. Rumpelstiltskin. Radiology. What is a lobotomy. Candice bergen. Bone. Qantas. Ncaaw. Strip. Virgo personality. Watchmen. Glen campbell. Agatha christie. Istanbul. Alani. Names. Pele. When is christmas. Fontana. Succulent plants. Jalen hurts. Maltese dog. Continuity. Anachronistic. Trilobite. Surge. Porcelain. Keno. https://blog-272025.tv53.ru/
    Jambalaya recipe. Oeuvre meaning. Houthis. Africa cup of nations. Famous paintings. Capri. Julie newmar. Ewan mcgregor movies and tv shows. Disneyland california. Xxx sex. International womens day. Meg. Iguana. Democratic national convention. Carmel. Kefir. Licorice. Museum of modern art. Wok. Concomitant. Real. Plastic. World cup cricket. Do the right thing. Cable news network news. Conversion disorder. Schmaltz meaning. Kevin love. Alprazolam. At&t. Salmonella symptoms. Taylor swift lover. Mary lou retton. Jaded meaning. Blue velvet. Ursula andress. Mel gibson. Smallpox. Grumpy old men. Kate mckinnon. Mira sorvino. Mosaic. Smith college. U of arizona. Donnie darko. Kangaroo. Sugar bowl 2024. Eugene oregon. Animal. Haw. Peter thiel. Juniper tree. Amy poehler. Black square. Mike schmidt. Andrew garfield movies. Mum. Keep. Starling.

  9. WQSSXOO表示:

    Reaper. Ringworm treatment. Olivia rodrigo age. Amendment. The crucible. Honeydew. Because. Lodi. Lactose intolerance. Bismuth. Fibula. Compliance. Oriole. Sam neill. University of oregon. Kieran culkin. Kamikaze. Jeep. Sarah palin. Honey movie. Pit viper. Detroit. Elliott gould. 10 commandments in order. Rangers baseball. Hypothesis. Bee. When does fall start. Toga. Collision. San jose. David harbour. Malice. Marine ranks. Paganism. New braunfels. Harvey. Brave new world. Zola. Rotterdam. Waves. Virtual. Fifth amendment. Quantum. Bumble bee. https://blog-361712.tv53.ru/
    Cali. What is sodomy. Eve. The hate you give. Adrenal gland. The atlantic. Pierce brosnan movies list. Transformer. Homer. Ryan reynolds movies. Dire wolf. What national day is it. State abbreviations. Real madrid cf. Evay. Nystagmus. Smitten. Angie dickinson. German flag. Napoleon movie. Moles. Neuron. Picnic. Motif. Us citizenship test. Nope movie. Mark wahlberg. Penicillin. Rr. Ww2 dates. Dow jones index. Aka. Rottweiler. Hypotension. House of representatives. Imdb. Seamoss. Ft. Racoon. Creep. Corinthians. William shakespeare. Pentecostal. Imperative. When does winter start. Fifa womens world cup. Funny games. Frivolous.

  10. EEYMLNM表示:

    Ys. Sean combs. Sumo. Bucknell university. Balaclava. Types of clouds. Donna summer. Why were chainsaws invented. Antisemitism. Butterfly. Mother god. Pumas. Golden eagle. Pika. Sega. Elon musk children. John goodman. Summa cum laude. Plumbing. Usa map. New zealand. Longwood gardens. Carl weathers. Kennedy center. Viscosity. Monologue. John deere. Habanero. Griselda blanco death. Green book. Kerosene. Deniro movies. Grand central terminal. Antigua and barbuda. Guess. Chigger. Brunette. Confidence interval. Acid. Kate moss. Malawi. Remission. Roe vs wade. Alcoholism. Interesting synonym. Dead sea. The parent trap cast. National lampoon’s vacation. What is ovulation. Fox broadcasting company. Mitochondrion. River. Tarpon. https://blog-221635.tv53.ru/
    Euphoria meaning. Del. Gematria. Social services. The longest yard. Unthinkable. Dolly. Salicylic acid. How tall is simone biles. Desi arnaz. Cobalt. Bull. Ceelo green. Kent state university. Map of israel. Rue mcclanahan. Yu. Al michaels. Paul rudd. Zionism. What is cte. Typology. Ana de armas all movies list. Quebec city. Entropy. Jack the ripper. Snake. Washer. Ljubljana. Demographic. The daily mail. Jared kushner. Aramaic. Callus. Dunk. National mall. Northrop grumman. Voltaire. Discrepancies. Henna. Burj khalifa. About. Para. Tropic thunder. Ray kroc. Moonlight. Anjelica huston. Dominica. Necrosis. Conversion disorder. Chloe bailey. Bermuda triangle. Total eclipse 2024. Vera-ellen.

  11. Предлагаем услуги профессиональных инженеров офицальной мастерской.
    Еслли вы искали ремонт телевизоров samsung цены, можете посмотреть на сайте: срочный ремонт телевизоров samsung
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  12. Jaimevoink表示:

    buy cytotec over the counter Misoprostol 200 mg buy online cytotec online

  13. ArmandoDat表示:

    lisinopril 10 mg over the counter: purchase lisinopril online – zestril pill

  14. ArmandoDat表示:

    where can i buy zithromax in canada: zithromax for sale usa – zithromax online australia

  15. JimmieTup表示:

    https://lisinoprilus.com/# can i buy lisinopril over the counter in mexico

  16. JimmieTup表示:

    http://ciprofloxacin.cheap/# cipro 500mg best prices

  17. RobertUnmab表示:

    cipro 500mg best prices: ciprofloxacin 500mg buy online – cipro for sale

  18. RobertUnmab表示:

    lisinopril 0.5 mg: lisinopril 80 mg daily – lisinopril 5 mg price

  19. Jaimevoink表示:

    lisinopril 12.5 mg lisinopril capsule lisinopril cost us

  20. After study a few of the blog posts on your website now, and I truly like your way of blogging. I bookmarked it to my bookmark website list and will be checking back soon. Pls check out my web site as well and let me know what you think.

  21. Jaimevoink表示:

    can i order clomid cost generic clomid without dr prescription clomid without insurance

  22. поздравления с днем рождения маме поздравления с днем рождения маме .

  23. ArmandoDat表示:

    buy cytotec over the counter: order cytotec online – buy cytotec over the counter

發佈留言

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