26 January 2012

Free Javascript for Rotating Website Banner or Fading Slideshow - standalone

As flash becomes less widespread I've had more and more instances where I need to create website banners in Javascript rather than my old flash approach. Today I've decided to share my method with my adoring public (that's you!).

This method is completely standalone and does not require jQuery or any other plugin or library. It has been tested and works in latest versions of all browsers.

View a demo here (right click to get the whole source at once) or view the step-by-step instructions below...

Please see my note before copying my code - thank you! >

Add this between your head tags. You can tweak the speeds etc in the BANNER SETUP section at the top.


var imageCount = 5;  //how many images in total?
var changeSpeed = 3;  //how many seconds between fades?
var fadeSpeed = 0.5; //how many seconds should the fade take?
var fps = 25;  //animation frames per second

var topImgID
var changeInterval

function $(id){ //just a shortcut function:

function changeOpac(obj, opacity) {//change the opacity for different browsers:
 obj = obj.style; 
 obj.opacity = (opacity / 100);
 obj.MozOpacity = (opacity / 100);
 obj.KhtmlOpacity = (opacity / 100);
 obj.filter = "alpha(opacity=" + opacity + ")";

function changeImage(){
 var nextImgID = ( topImgID+1 <= imageCount ? topImgID+1 : 1 ); //get id number of next image in list
 var nextImg = $('banner'+nextImgID);
 var lastImg = $('banner'+topImgID);
 var opac = 0;
 changeOpac( nextImg, opac) //make next image invisible, then bring it to the top:
 lastImg.style.zIndex = 2;
 nextImg.style.zIndex = 3;

 var fadeInterval = setInterval(function(){ //run fade on interval:
  if(opac < 100){//continue fade:
   opac += Math.ceil(100/(fadeSpeed*fps));
   changeOpac(nextImg, opac);
  }else{//end fade:
   lastImg.style.zIndex = 1;
 }, 1000/fps)

 topImgID = nextImgID; //prepare next fade

function startBanner(firstImageID){
 topImgID = (firstImageID==undefined ? 1+Math.floor(Math.random()*(imageCount)) : firstImageID);
 $('banner'+topImgID).style.zIndex = 2;
 changeInterval = setInterval(changeImage, changeSpeed*1000);
Add this to your stylesheet and tweak to your liking:

.banner{position:absolute; z-index:1; height:230px; width:720px; top:0px; background:#FFF; border:solid 1px #CCC}
.banner h1{position: absolute; bottom:20px; right:20px; font-style:italic; color:#444; float:right; width:50%; font-size:40px; text-align:right; line-height:100%;}
Add this to your html and tweak to your liking:

<div id="banner2" class="banner">
    <h1>It runs on a loop</h1>
<div id="banner3" class="banner">
    <h1>The images are actually div tags</h1>
<div id="banner4" class="banner">
    <h1>So they can contain text, colours or other content</h1>
<div id="banner5" class="banner">
    <h1>You can control the speed, the start image & number of images</h1>
<div id="banner1" class="banner">
    <h1>This banner fades between images</h1>
Finally, if you want the banner to automatically start, add this to your body tag. 1 is the id of the first image you want to show. Leave it blank to choose a random image.

<body onload="startBanner(1)">


«Oldest   ‹Older   201 – 274 of 274
sha sha said...

Dapatkan promo akhir tahun di bandar judi bola online terpercaya kami

360digiTMG Training said...

I see some amazingly important and kept up to length of your strength searching for in your on the site
Data Science Training in Hyderabad

officelaptop said...

I absolutely adore this information as this is going to be very difficulty time for the whole world. great things are coming for sure 먹튀검증

Maneesha said...

It's late discovering this demonstration. At any rate, it's a thing to be acquainted with that there are such functions exist. I concur with your Blog and I will have returned to assess it more later on so please keep up your demonstration.
data scientist course

dataanalyticscourse said...

Your work ethic is out of this world! The pride you take in your work is truly inspiring.
big data analytics malaysia

360DigiTMG said...

Nice and very informative blog, glad to learn something through you.
data scientist course malaysia

918kiss apk said...

918kiss official enforces this link for you to download with android and ios apk for security protected 918kiss, so you get the original 918kiss game.

Best Regards:

sodium Pentobarbital for sale said...

where to buy sodium phenobarbital  |  
buy sodium phenobarbital online  | 
sodium phenobarbital buy| 
where to buy pentobarbital for dogs| 
order pentobarbital euthanasia dose | 
buy nembutal discreetly | 
buy nembutal pentobarbital sodium| 
where to buy euthasol | 
buy nembutal powder from reliable supplier | 
reliable source nembutal| 
nembutal alternatives| 
nembutal powder| 
buy seconal| 
pentobarbital online mexico| 
where to buy sodium pentobarbital | 
where to buy nembutal pentobarbital| 
buy pentobarbital online for animals| 
where can i buy pentobarbital| 
nembutal pills for sale online| 
where to buy pentobarbital| 
where to buy nembutal online| 
nembutal by mail order| 
buy barbiturates| 
buy barbiturate analogues| 
barbiturate store online | 
where can i buy pentobarbital | 
where can i buy nembutal| 
nembutal pentobarbital barbiturate| 
barbiturate pharmacy| 
buy pentobarbital online for animals| 
where to buy nembutal pentobarbital | 
 nembutal pentobarbital barbiturate for dogs| 
 buy nembutal pentobarbital euthanasia | 
 buy pentobarbital online for animals| 
 where can i buy pentobarbital |
 nembutal pentobarbital sodium |
 where to buy nembutal online |  
 where to get nembutal |
 where to order secobarbital for suicide |
secobarbital buy online  |
buy pentobarbital powder |
buy euthanasia in usa |
order euthanasia online |
buy peaceful pills |
best supplier of barbiturate|
order  barbiturate securely |
buy  barbiturate for pet |
secure online nembutal pharmacy|
online nembutal pharmacy |
buy seconal powder|
can you buy nembutal online|
where to buy nembutal pentobarbital|
buy nembutal in usa |
where to buy nembutal online |
purchase nembutal online|
buy nembutal online in europe |
buy nembutal online in EU |
nembutal by mail order |
order  barbitrate by mail |
nembutal by mail order |
order nembutal by mail |
Order Amoxicillin for the best price|
Order Amoxicillin online |
Order Nembutal online with paypal |
nembutal by mail worldwide |
buy nembutal online in canada |
buy nembutal in usa |
buy sodium pentobarbital euthanasia |
sodium pentobarbital for sale|
pentobarbital sodium sleeping pills|
euthasol for sale |
order sodium pentobarbital for veterinary use|
buy pentobarbital sodium injection|
buy pentobarbital sodium sds online |
 where to buy nembutal online |
 where to get nembutal | nembutal online shop 
order  nembutal pills from canada | secure order order nembutal powder in canada | where can i buy nembutal |
 purchase nembutal online |
 where can i buy pentobarbital |
buy powder and liquid pentobarbital solutions
nembutal by mail order |  ordering cheap Nembutal online
where to buy pentobarbital
where can i buy pentobarbital| buy pentobarbital online for animals|
sodium pentobarbital for sale| where to buy nembutal pentobarbital |
where to buy nembutal online| nembutal pills for sale online|buy nembutal pentobarbital euthanasia |where to buy nembutal online| where to buy nembutal pentobarbital | sodium pentobarbital for sale| where can i buy nembutal|purchase nembutal online| nembutal pills| where to buy sodium pentobarbital| how to buy pentobarbital |legit supplier of nembutal powder | where can i order nembutal pills|   order nembutal with credit card  | order nembutal online pentobarbital online kopen | pentobarbital kopek belgie| nembutal waar te koop | nembutal bestellen |
nembutal nederland|
pentobarbital kopen|
nembutal pentobarbital bestellen|
nembutal nederland|
nembutal kopen| nembutal kopen betrouwbaar| pentobarbital waar te koop|
nembutal online bestellen | pentobarbital bestellen |natrium pentobarbital bestellen | nembutal pentobarbital bestellen
nembutal bestellen | WhatsApp  + 33752817826
Email Us   info@hospitableending.com
Visit Website: https://hospitableending.com/

pentobarbital kopen| said...

sodium Pentobarbital for sale , achat en ligne du pentobarbital de sodium, achat pentobarbital de sodium, acheter du pentobarbital de sodium, acheter pentobarbital de sodium, commander du pentobarbital de sodium,https://hospitableending.com/ commander pentobarbital de sodium, comment fabriquer du pentobarbital de sodium, https://hospitableending.com/ comment se procurer du pentobarbital de sodium, composition du pentobarbital de sodium,

buy a driver license online | said...

Buy Real registered EU drivers license |
Instant EU License: Buy Real registered EU drivers license
buy driving license|
driver license germany |
how to buy a car with no drivers license |
buy a driving license |
Buy Eu Driver's Licenses Online |
Kaufen Sie einen echten registrierten Führerschein |
Buy Registered German driving license |
Buy Real registered EU drivers license without testing |
Kaufen Sie einen echten deutschen Führerschein online|
Real drivers license for sale online |
Buy Real registered EU drivers license |
Instant EU License: Buy Real registered EU drivers license
buy driving license|
driver license germany |
Buy registered drivers license |
Real drivers license for sale online |
Buy registered drivers license |
Order Novelty drivers license for sale Online |
Order Novelty drivers license for sale Online |
buy a car without drivers license |
buy a driver license online |
buy a new driving license |
WEBSITE LINK : https://instanteulicense.com/
EMAIL : info@instanteulicense.com
CALL/TEXT +31684589349
WHATSAPP: +31684589349

Seo Group Buy Tools said...

SEO Group Buy Tools share 140+ seo tools for cheap: Ahrefs, Semrush, Majesticseo, Kwfinder, Keywordtool, Longtailpro, Buzzsumo, Domcop, ...
Best Regards:
buy seo tools group

My Seo Dr said...

Rank Your Business On First Search Result Page. Strengthen Your Online Presence. Get Ultimate SEO Strategy From Our Dedicated Experts. Call Us Now! Local SEO Services. SEO Services Malaysia. Free Expert Consultation. Free Website Analysis.

Best Regards:
Seo Company Malaysia

dfgfhft said...

slot online joker123 dengan rating kemenangan terbesar hanya ada di baginda4d. slot online terlengkap dan populer

smith said...

buy medical marijuana online | buy medical marijuana online uk | buy medical marijuana online usa

yanmaneee said...

pandora charms
nike x off white
supreme clothing
off white
steph curry shoes
supreme clothing
kyrie 6 shoes
nike sb
supreme outlet

Paul Allen said...

Thank you for sharing excellent information. Your web-site is so cool. I am impressed by the details that you've on this website. It reveals how nicely you perceive this subject. Bookmarked this web page, will come back for more articles. You, my friend, ROCK! I found simply the information I already searched everywhere and just couldn't come across. What an ideal website. I must say, I thought this was a pretty interesting read when it comes to this topic. Liked the material cheap email hosting uk

Belajar Video Editing said...

thank you very good article
Webmedia Center

Madrid Software Trainings said...

I must appreciate you for providing such valuable content for us. To make our dreams a reality, Advancements in the field of digital technology means machine learning and artificial intelligence are becoming more important each passing day. Most of the top IT and research companies are now seeking specialists in artificial intelligence. With the scope for artificial intelligence significantly expanding, career in AI are becoming aplenty.

Cut Out Way said...

Great Thanks for sharing this information. I am so happy to read these articles
Cut Out Photo

Biddut Sarkar said...

Wow, pretty cool tips. I really appreciate your post. I definitely visit this blog again
Drop Shadow Service
Background Removal Service

Agen Situs Joker Gaming Daftar mudah Bersama Layanan Terbaik Dan Terkemuka Indonesia said...

Joker Gaming ( JOKER123 ) sampai detik ini udah menembus angka pengguna sampai jutaan orang. Saking ramainya, Agen Judi Seandainya penyedia jasa sarana game hal yang demikianlah termasuk berhamburan di dunia maya. Lewat kamu nggak percaya searching aja di Google.

Anonymous said...

Informative blog post,
Social Media Marketing Course

Anonymous said...

Informative blog post,
Digital Marketing Course with Internship

Satta Matka said...

I have learned huge knowledge from here. I am waiting for your updates
Regards: "satta matka"

smith said...

The Clear Concerntrate have one of the most authentic and best selling products you will ever find, you can check them out here, for more information

Pusat Pendaftaran Akun Id Joker Gaming SLot Terbesar said...


Alex said...

Derb and Terpys Live Resin
Wedding Crashers strain
Derb and Terpys Wedding Crashers strain
Derb and Terpys
Derb and Terpys Trixx
Derb and Terpys Tangie Town
Derb and Terpys Sweeties
Derb and Terpys Sunset Sherbet
Shirley temple strain
Derb and Terpys Rainbow
Derb and Terpys Rainbow Runtz
Biscotti weed strain
Derb and Terpys Biscotti weed strain
Birthday Cake Strain
Derb and Terpys Birthday Cake Strain
Derb and Terpys honey boo boo

Unknown said...

buy weed online
buy weed online
buy medical cannabis online
buy marijuana online
legit online dispensary
buy cannabis online
buy weeds online
legit online dispensary

Bandar Togel Online said...

bandar togel online dengan member terbanyak dan testi yang bagus hanya di kingdomgrup

Tomy Goldenson said...

.T.C.C. .A.T.

Nice one, Thanks for sharing valuable information with us. I really had some good time grabbing some knowledge. Still I am out to speak and propose you stuffs like.. Browse the widest, most trusted source of CHIHUAHUA PUPPIES FOR SALE. Search by desired gender, age, and more. Pure Bred Puppies For Sale With One Year Health Guarantee. Contact Us Today. TEACUP CHIHUAHUA FOR SALE NEAR ME

Tomy Goldenson said...

Nice & Informative Blog ! We offer DIRECT VAPOR. Check it out!...

web host g said...

Are you looking for a regular, reliable weed supplier?
buy weed online
buy weed online
stop addiction
buy iboga online
order legit weed
order legit weed
buy weed online
buy weed online
stop addiction
buy iboga online
order legit weed
order legit weed
buy weed online
buy weed online
stop addiction
buy iboga online
order legit weed
order legit weed
buy weed online
buy weed online
stop addiction
buy iboga online
order legit weed
order legit weed
buy weed online
buy weed online
stop addiction
buy iboga online
order legit weed
order legit weed
buy weed online
buy weed online
stop addiction
buy iboga online
order legit weed
order legit weed

360DigiTMGAurangabad said...

Good information you shared. keep posting.
data scientist courses in aurangabad

Jhony said...

Archipelago Learning merupakan situs daftar agen judi bola terpercaya indonesia deposit pulsa dan judi online terlengkap.

Mercadode Sanagustin said...

daftar slot online. The food markets of Huéscar and San Agustín de Granada capital have completed their transformation ...

Satria Muda said...


castletoto said...

Agen Togel Online peling terpercaya se asia!! dan amanah bangett! cuma diroyal toto

aditya said...

I read that Post and got it fine and informative.

DNS Server Not Responding

keluaranhk said...

keluaran hk
hanya di situs web terpercaya dapatkan paket lengkap

training institute said...

Such a very useful article. Very interesting to read this article.I would like to thank you for the efforts you had made for writing this awesome article.
data science course

Satria Muda said...

agen joker123 Rivalbet303
Agen Slot Online RIVALBET303 Best

Unknown said...

Great Article Image Processing Projects Deep Learning Projects for Final Year JavaScript Training in Chennai JavaScript Training in Chennai The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training Project Centers in Chennai

hkpools said...

menyediakan permainan yang mudah, seru dan menghasilkan bonus dengan mudah hanya di hkpools

Noah liam said...

You have a great way with words as shown in your article. You're even good with informational content like you have here. I like your views and your writing technique. CBD Vape Packaging

TerryAchie90 said...

MENANGQQ memberikan bonus kemenangan ratusan juta setiap hari, gabung sekarang juga

goreadsocialmedia said...

goreadsocialmedia.com believes that your Instagram followers are one of the most valuable assets that you have. When it comes to building a following on social media, there is no such thing as too many followers that we will give you.

hkpools said...

dapatkan penghasilan tambahan hanya dengan bermain di situs hkpools

Anonymous said...

Thanks for sharing the post.. parents are worlds best person in each lives of individual..they need or must succeed to sustain needs of the family.
joker123 slot

mposlot said...

berbagai jenis permainan game online tersedia disitus mpo slot.

Microsoft365/setup said...

microsoft365.com/setup/family product key is a secured 25 digit alphanumeric code
series xxxxx-xxxxx-xxxxx-xxxxx-xxxxx. This activation key can be used summarily to
install and activate the product with ease. One can effortlessly access more information
about these product keys at microsoft365.com/setup today.


micrsoft365.com setup

goreadsocialmedia said...

Thanks for providing this informative article. goreadsocialmedia.com believes that your buy facebook likes australia
are one of the most valuable assets that you have.
Read More
buy Instagram followers australia
buy Instagram likes australia
buy Instagram followers

Alix Hills said...

Print Custom Vape Packaging for your next makeup line or set of beauty essentials. Select a custom size. Choose from durable cardstock or corrugated cardboard

Anonymous said...

This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free.
login joker123

Unknown said...

marijuana has been a stepping stone to the medical condition of most patients.
many people suffering from cancer, chronic pain, anxiety, and many more have overcome their aillments with cannabis.
you can order weed from our store.medical condition

traininginstitute said...

This website is remarkable information and facts it's really excellent
cyber security training malaysia

LSD FOR Sell said...

Psychedelic is a relating or denoting drug (especially LSD) that produces hallucinations and apparent expansion of consciousness.

Psychedelic therapy is a technique that involves the use of psychedelic substances to aid the therapeutic process.

Lsd for sale

kera4d said...

the best kera4d

Slot Bonus New Member 100 said...

slot pulsa
Daftar Slot Deposit Pulsa 10rb

kera4d said...

you will need support or suggestions, write me privately.
I interested in your implementation/use case.
the best situs slot terbaik

Unknown said...

legit online dispensary shipping worldwide
most trusted online dispensary ship all 50 states
Order Marijuana online Shipping wworldwide

Unknown said...

legit online dispensary shipping worldwide
legit online dispensary shipping worldwide
most trusted online dispensary ship all 50 states

Unknown said...

Where to Get COVID-19 Vaccine Card
legit online dispensary shipping worldwide
Order Marijuana online shipping worldwide

Unknown said...

Where to Buy All Your Dream Vintage Furniture Online, STORAGE CABINETS
furniture stores near me, SOFAS

Unknown said...

How to get Covid-19 Vaccine Certificate without vaccine
Best place to buy covid card online payment
Buy covid-19 vaccine Certificate Online USA

Hazim Mir said...

Thankyou For Sharing Such An Excellent Post Enjoyed Reading It


ij.start.canon setup
ij.start.canon setup

Slot Bonus New Member 100 said...

REPUBLIKSLOT merupakan situs slot online terbaik 2022 yang menyediakan ribuan mesin slot pulsa gacor mudah menang jackpot terbesar dan judi fafaslot 88 terpercaya di Indonesia melalui link https://conecta.bio/slotxl alternatif resmi PASTI BAYAR. Dapatkan berbagai kemudahan bermain slot online24jam tanpa potongan hanya 20rb dan nikmati juga bonus new member 100% di awal to kecil segera.

dr rash said...

where to buy oxynorm

dr rash said...

At Dr . Medshop, we provide the best quality online service in this industry. Place your order with us 24/7 and receive instant response from our team.
where to buy oxynorm

dr rash said...

At Dr . Medshop, we provide the best quality online service in this endustry. nPlace your order with us 24/7 and receive instant response from our team. where to buy oxynorm

Darkangle said...

Very informative Blog! There is so much information here that can help thank you for sharing.

human resources software in india | best crm for small business in india

Unicef of Ukraine said...

unicef ukraine has been working around the clock to keep children safe in Ukraine since this conflict began eight years ago. Help UNICEF ensure that child health and protection services are sustained and families have clean water and nutritious food.

Anonymous said...

Owings for this particular newsy and interesting blog. I am particularly glad to seek out this type of information and facts. url opener
online filmek

pearson said...

Buy Meth Online. Crystal mеth iѕ the common name fоr сrуѕtаl methamphetamine, a ѕtrоng аnd highly addictive drug that affects the central nеrvоuѕ ѕуѕtеm. meth for sale, buy meth, buy crystal meth online, buy methamphetamine online, crystal meth online, buy crystal meth, order meth online

Demo Sweet Bonanza Pragmatic Play said...

Mainkan demo slot spaceman pragmatic bersama kami dengan klik link http://slotsspaceman.web.fc2.com/ dan temukan juga keuntungan uang asli dari jackpot slot yang dimenangkan.

«Oldest ‹Older   201 – 274 of 274   Newer› Newest»

Post a Comment

Cron Design Studio: Dublin based web design & software development