Skip to content

Instantly share code, notes, and snippets.

@nu7hatch

nu7hatch/example.html

Created September 7, 2010 14:20
Show Gist options
  • Star 19 You must be signed in to star a gist
  • Fork 15 You must be signed in to fork a gist
  • Save nu7hatch/568409 to your computer and use it in GitHub Desktop.
Save nu7hatch/568409 to your computer and use it in GitHub Desktop.
Download ZIP
Simple banner rotator with jQuery
Raw
example.html
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<link href="rotate.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="rotate.js"></script>
<script type="text/javascript">
$(window).load(function() {
startRotator("#rotator");
})
</script>
</head>
<body>
<div id="rotator">
<img height="54" src="http://profill.biz.pl/images/klienci/1.jpg" width="150" />
<img height="55" src="http://profill.biz.pl/images/klienci/2.jpg" width="168" />
<img height="69" src="http://profill.biz.pl/images/klienci/3.jpg" width="138" />
<img height="52" src="http://profill.biz.pl/images/klienci/4.jpg" width="158" />
<img height="114" src="http://profill.biz.pl/images/klienci/5.jpg" width="117" />
<img height="46" src="http://profill.biz.pl/images/klienci/6.jpg" width="190" />
<img height="58" src="http://profill.biz.pl/images/klienci/7.jpg" width="177" />
<img height="79" src="http://profill.biz.pl/images/klienci/8.jpg" width="174" />
<img height="53" src="http://profill.biz.pl/images/klienci/10.jpg" width="161" />
<img height="85" src="http://profill.biz.pl/images/klienci/11.jpg" width="128" />
<img height="46" src="http://profill.biz.pl/images/klienci/12.jpg" width="140" />
<img height="77" src="http://profill.biz.pl/images/klienci/13.jpg" width="139" />
<img height="49" src="http://profill.biz.pl/images/klienci/14.jpg" width="152" />
<img height="53" src="http://profill.biz.pl/images/klienci/15.jpg" width="137" />
<img height="47" src="http://profill.biz.pl/images/klienci/16.jpg" width="150" />
<img height="40" src="http://profill.biz.pl/images/klienci/17.jpg" width="153" />
<img height="144" src="http://profill.biz.pl/images/klienci/18.jpg" width="149" />
<img height="56" src="http://profill.biz.pl/images/klienci/19.jpg" width="170" />
<img height="81" src="http://profill.biz.pl/images/klienci/20.jpg" width="161" />
</div>
</body>
</html>
Raw
rotate.css
#rotator img { position: absolute; }
Raw
rotate.js
function rotateBanners(elem) {
var active = $(elem+" img.active");
var next = active.next();
if (next.length == 0)
next = $(elem+" img:first");
active.removeClass("active").fadeOut(200);
next.addClass("active").fadeIn(200);
}
function prepareRotator(elem) {
$(elem+" img").fadeOut(0);
$(elem+" img:first").fadeIn(0).addClass("active");
}
function startRotator(elem) {
prepareRotator(elem);
setInterval("rotateBanners('"+elem+"')", 2500);
}
@ronik-arg
Copy link

Gr8! thanks buddy

@kirti123
Copy link

Hello,
I want to count the rotation of particular image that rotates...So, how can i do that?

Thanks

@dddddddddddd
Copy link

THANKS

@pavankondapuram
Copy link

Thank you

@eddiex7
Copy link

eddiex7 commented Dec 26, 2013

Muito Bom !! thanks amigo !!

@NeoFilms
Copy link

THANKS!!!

@davefuse
Copy link

davefuse commented Jun 3, 2014

How would i go about to add a link to rotate with the images?

@michaelorozco
Copy link

I would like to pause this on hover over the an image? any thoughts,

@nscovell
Copy link

Hello, I am trying to add a button that will rotate the banner on its own. But it doesnt work. Would you know how to do that?

$(document).ready(function(){

$("#myButton").mouseover(function() {
    startRotator();

setInterval("rotateBanners('"+elem+"')", 5500);
});
})

@gregmsnow
Copy link

How would i add a Nofollow to each link or all combined?

@lylest
Copy link

lylest commented Apr 25, 2019

jQuery.Deferred exception: e.indexOf is not a function TypeError: e.indexOf is not a function
guess what i can not make it work

@pszyjaciel
Copy link

dzieki panie dzieju. proste i skuteczne.

@BehnamZeraat
Copy link

Dear admin

How do I add a destination to each image source?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment