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.

//ROTATING BANNER BY CIARAN O'KELLY 2012 - BLOG.CRONDESIGN.COM

//BANNER SETUP:
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

//BANNER FUNCTIONS:
var topImgID
var changeInterval

function $(id){ //just a shortcut function:
 return(document.getElementById(id));
}

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;
   clearInterval(fadeInterval);
  }
 }, 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%;}
#banner1{background-image:url(banner1.jpg);}
#banner2{background-image:url(banner2.jpg);}
#banner3{background:#F90}
#banner4{background:#FFC}
#banner5{background:#99CCFF}
Add this to your html and tweak to your liking:

<div id="banner2" class="banner">
    <h1>It runs on a loop</h1>
</div>
<div id="banner3" class="banner">
    <h1>The images are actually div tags</h1>
</div>
<div id="banner4" class="banner">
    <h1>So they can contain text, colours or other content</h1>
</div>
<div id="banner5" class="banner">
    <h1>You can control the speed, the start image & number of images</h1>
</div>
<div id="banner1" class="banner">
    <h1>This banner fades between images</h1>
</div>
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)">

254 comments:

«Oldest   ‹Older   201 – 254 of 254
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
goyard
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...

https://pokerlive.wildapricot.org/
https://slotcasino.wildapricot.org/
https://agen-poker.wildapricot.org/
https://idnplay88.wildapricot.org/
https://cemeidnplay.wildapricot.org/
https://pokeridn-online.wildapricot.org/
https://judislot-casino.wildapricot.org/
https://slot-online-live.wildapricot.org/

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 http://128.199.187.54/

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!...
VAPE SHOP
VAPE STORES NEAR ME
VAPE STORE
VAPE PEN NEAR ME
DIRECT VAPOR
CHEAP VAPE MODS
VAPIN USA
BEST ONLINE VAPE STORE
CHEAP VAPE PENS

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

SV388
DAFTAR JOKER123
JOKER388
IDN POKER
BANDAR JOKER
AGEN JOKER123
SITUS JOKER
DAFTAR JOKER
LOGIN JOKER123
JOKER123
LOGIN JOKER123b
JOKER GAMING
JOKER123d

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.

techwithgeeks
talesbuzz
whizzherald
alternativestips
romsmania
shindigweb
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

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.

http://139.162.43.253/

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.

Regards

microsoft365.com/setup
micrsoft365.com setup
microsoft365
office365.com
www.primevideo.com/mytv
primevideo.com/mytv

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

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

Slot Bonus New Member 100 said...


REPUBLIKSLOT
https://94.237.78.17/
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
Togel2win

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


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

Hazim Mir said...

Thankyou For Sharing Such An Excellent Post Enjoyed Reading It

Regards

ij.start.canon setup
ij.start.canon setup
wwww.micrsoft365.com/setup
micrsoft365.com/setup
123.hp.com/setup
www.primevideo.com/mytv

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

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
uwatchfree

Anonymous said...

Hope it will certainly be useful for all. All the particulars are dispensed in a convenient and also reasonable procedure.
UWatchFree
PlayTubes

Togel Korea said...

Really good Information sir

Togel Korea

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

Post a Comment

Cron Design Studio: Dublin based web design & software development