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

  1. One important issue is that when you find yourself searching for a education loan you may find that you’ll need a cosigner. There are many conditions where this is true because you might find that you do not have a past history of credit so the mortgage lender will require that you’ve got someone cosign the financial loan for you. Great post.

  2. Some really nice and useful information on this web site, besides I conceive the design and style has got great features.

  3. nrrqhvhdi表示:

    Дэдпул и Росомаха фильм https://bit.ly/deadpool-wolverine-trailer-2024

  4. Fdyvfb表示:

    trileptal ca – purchase pirfenex for sale order synthroid 75mcg without prescription

  5. I truly enjoy looking at on this web site, it contains great blog posts.

  6. One thing I’d like to say is car insurance cancellations is a dreadful experience and if you are doing the right things as a driver you won’t get one. Lots of people do have the notice that they’ve been officially dumped by their own insurance company they then have to fight to get additional insurance after the cancellation. Cheap auto insurance rates usually are hard to get from a cancellation. Having the main reasons for auto insurance termination can help car owners prevent burning off one of the most critical privileges out there. Thanks for the thoughts shared through your blog.

  7. Shop the latest trends at ag jeans.

  8. finbeta表示:

    Good write-up, I?m normal visitor of one?s web site, maintain up the nice operate, and It is going to be a regular visitor for a lengthy time.

  9. I’ve been browsing online more than three hours these days, yet I never found any fascinating article like yours. It is pretty price sufficient for me. In my opinion, if all website owners and bloggers made excellent content as you did, the net might be much more useful than ever before.

  10. Good blog! I truly love how it is simple on my eyes and the data are well written. I am wondering how I could be notified when a new post has been made. I’ve subscribed to your feed which must do the trick! Have a great day!

  11. Shop top Marc Jacobs styles on sale at the marc jacobs outlet.

  12. RobertHaumn表示:

    natural alternatives to tamoxifen: nolvadex vs clomid – buy nolvadex online

  13. I’m in awe of the author’s ability to make complex concepts approachable to readers of all backgrounds. This article is a testament to his expertise and passion to providing valuable insights. Thank you, author, for creating such an engaging and insightful piece. It has been an incredible joy to read!

  14. This will prevent you from finding out later that there was a better way to handle the transaction for tax purposes.

  15. t ded88s表示:

    Interesting article. It’s very unfortunate that over the last several years, the travel industry has already been able to to deal with terrorism, SARS, tsunamis, influenza, swine flu, as well as first ever real global economic collapse. Through everything the industry has really proven to be solid, resilient in addition to dynamic, acquiring new strategies to deal with adversity. There are often fresh difficulties and the possiblility to which the marketplace must again adapt and reply.

  16. Cognicare Pro表示:

    fantastic issues altogether, you simply received a logo new reader. What might you suggest in regards to your publish that you simply made a few days in the past? Any positive?

  17. Reent表示:

    Quite simply because we have the best tipsters. OLBG has been providing betting picks since 2002. During this time our tipsters have been rewarded with over $1,000,000 in prize money. These huge prize funds attract and retain the best sports betting tipsters and handicappers around.  Bovada provides the best odds available across our recommended sportsbooks, with reduced juice on a wide variety of events and competitive odds. Players can also access Bovada Casino games with house edges as low as 0.037% on blackjack. Not only do I love the fact you can livestream games while wagering on them, but Bet365 is also one the best online sportsbooks in the business so they’re quick to help if you were to run into any problems while live betting.
    http://freestyler.ws/user/464913/anbospahah1976
    Don’t know how to bet on UFC fighting? Don’t worry. We’ve got you covered. There are plenty of options, from placing your money on a fighter to betting on the method of victory during a round. But before you go placing a large bet, it’s best to know the basics. We’ve rounded up some of the best UFC betting tips so you can ace the competition. Whether you’re in Vegas or doing it online, here are the best UFC fight betting tips around. I think Yags is better, and I’m not high on Biyong at all, but there’s a concern about Yags’s cardio and what happens if he doesn’t get Biyong out of there early. Betting Odds: The odds can grow exponentially with the correct UFC parlay bets. One three-leg combination for this week is presented below. Don’t miss out – sign up for our newsletters! (approx 1 – 2 per week)

  18. This web site doesn’t display properly on my iphone – you might wanna try and fix that

  19. I think this is among the most vital information for me. And i’m glad reading your article. But wanna remark on some general things, The website style is wonderful, the articles is really excellent : D. Good job, cheers

  20. Nhusjs表示:

    hytrin online – order terazosin 5mg pill priligy cost

  21. Superb website you have here but I was curious about if you knew of any user discussion forums that cover the same topics discussed here? I’d really love to be a part of group where I can get responses from other knowledgeable individuals that share the same interest. If you have any suggestions, please let me know. Thanks!

  22. Thank you for the good writeup. It in fact was once a amusement account it. Glance complex to far added agreeable from you! By the way, how can we keep in touch?

  23. Thanks for the diverse tips contributed on this weblog. I have realized that many insurance firms offer clients generous special discounts if they choose to insure many cars with them. A significant amount of households currently have several cars these days, in particular those with more aged teenage young children still located at home, and also the savings for policies might soon begin. So it is a good idea to look for a good deal.

  24. There are certainly a variety of details like that to take into consideration. That may be a nice level to deliver up. I provide the thoughts above as normal inspiration however clearly there are questions just like the one you deliver up where the most important factor will be working in sincere good faith. I don?t know if best practices have emerged round things like that, but I’m certain that your job is clearly identified as a good game. Each boys and girls really feel the impact of only a moment?s pleasure, for the remainder of their lives.

  25. Reent表示:

    Caso o contribuinte seja alvo da malha fina, é preciso fazer a retificação da Declaração do Imposto de Renda junto à Receita Federal. Porém, descobrir qual a inconsistência ou equívoco na própria declaração pode ser tarefa difícil, devido ao conhecimento técnico exigido. Portanto, antes de investir na poupança da Binance, preste atenção aos detalhes. Em suma, muitos usuários ficam tentados com as possibilidades de realizar um investimento mais seguro ou com as possibilidades de ganhar muito dinheiro através de criptomoedas.  Após gerar o extrato, você receberá um SMS ou E-mail de confirmação (Esse processo leva em torno de 10 a 15 minutos até o extrato ser disponibilizado para download).
    http://hawkee.com/profile/7174409/
    “A regulamentação deveria ter sido feita para ontem. A maioria dos golpes financeiros está relacionada a criptomoedas e outros ativos que as pessoas não conhecem. E, por não conhecerem, as pessoas são naturalmente enganadas. Para o sistema financeiro absorver isso e a gente poder dar segurança ao consumidor, a regulamentação se faz necessária”, afirmou ele. A medida visa criar condições para que Portugal tenha um “regime específico que visa promover a criptoeconomia”, disse o governo. Mineração e pagamento com criptomoedas podem ser praticados em qualquer ponto do globo. Talvez este seja o seu ponto mais forte, uma vez que estão livres de qualquer política ou economia nacional. É suficiente ter uma pendrive ou um cartão de memória para armazenar e usar moedas criptografadas.

  26. Superb blog! Do you have any hints for aspiring writers? I’m planning to start my own blog soon but I’m a little lost on everything. Would you advise starting with a free platform like WordPress or go for a paid option? There are so many options out there that I’m totally confused .. Any ideas? Many thanks!

  27. One thing I’d prefer to touch upon is that weightloss program fast can be carried out by the perfect diet and exercise. A person’s size not simply affects appearance, but also the complete quality of life. Self-esteem, major depression, health risks, plus physical ability are affected in excess weight. It is possible to make everything right and at the same time having a gain. Should this happen, a medical problem may be the root cause. While too much food but not enough exercising are usually at fault, common health conditions and widely used prescriptions may greatly increase size. Thx for your post in this article.

發佈留言

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