« »

This is an awesome image rotator JavaScript using jQuery to perform animation, with a little of CSS for styling. You can also use this jQuery image rotator as a JavaScript image slideshow or an image gallery JavaScript.

That's so cool jQuery effect, right now you can go for it on the live demo and setup for your own with copy&paste JavaScript/CSS/HTML codes provided. Or just wait for the next post tomorrow, I'll show you how to create this JavaScript effect with full explains.

Label: image rotator JavaScript, jQuery image rotator, JavaScript image slideshow, image gallery JavaScript

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">
body {
	margin: 0; padding: 0;
	font: 10px normal Arial, Helvetica, sans-serif;
}
* {margin: 0; padding: 0; outline: none;}
img {border: none;}
fieldset h1 {
	font: 3em normal Georgia, "Times New Roman", Times, serif;
	color: #fff;
	text-align: center;
	background: url(h1_bg.gif) no-repeat;
	text-indent: -99999px;
	margin: 100px 0 10px;
}
.container {
	overflow: hidden;
	width: 900px;
	margin: 0 auto;
}
#main {
	padding: 10px;
	background: #f0f0f0;
	border: 1px solid #ccc;
}
fieldset a {color: #fff;}

/*--Main Image Preview--*/
.main_image {
	width: 598px; height: 456px;
	float: left;
	background: #333;
	position: relative;
	overflow: hidden;
	color: #fff;
}
.main_image h2 {
	font-size: 2em;
	font-weight: normal;
	margin: 0 0 5px;	padding: 10px;
}
.main_image p {
	font-size: 1.2em;
	padding: 10px;	margin: 0;
	line-height: 1.6em;
}
.block small { 
	padding: 0 0 0 20px; 
	background: url(icon_calendar.gif) no-repeat 0 center; 
	font-size: 1em; 
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
	position: absolute;
	bottom: 0;	left: 0;
	width: 100%;
	display: none;
}
.main_image .block{
	width: 100%;
	background: #111;
	border-top: 1px solid #000;
}
.main_image a.collapse {
	background: url(btn_collapse.gif) no-repeat left top;
	height: 27px; width: 93px;
	text-indent: -99999px;
	position: absolute; 
	top: -27px; right: 20px; 
}
.main_image a.show {background-position: left bottom;} 


.image_thumb {
	float: left;
	width: 299px;
	background: #f0f0f0;
	border-right: 1px solid #fff;
	border-top: 1px solid #ccc;
}
.image_thumb img {
	border: 1px solid #ccc; 
	padding: 5px; 
	background: #fff; 
	float: left;
}
.image_thumb ul {
	margin: 0; padding: 0;
	list-style: none;
}
.image_thumb ul li{
	margin: 0; padding: 12px 10px;
	background: #f0f0f0 url(nav_a.gif) repeat-x;
	width: 279px;
	float: left;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #fff;
	border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
	background: #ddd;
	cursor: pointer;
}
.image_thumb ul li.active {
	background: #fff;
	cursor: default;
}
html .image_thumb ul li h2 {
	font-size: 1.5em; 
	margin: 5px 0; padding: 0;
}
.image_thumb ul li .block {
	float: left; 
	margin-left: 10px;
	padding: 0;
	width: 170px;
}	
.image_thumb ul li p{display: none;}



</style>

Copy All x2

<script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {	

	//Show Banner
	$(".main_image .desc").show(); //Show Banner
	$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity

	//Click and Hover events for thumbnail list
	$(".image_thumb ul li:first").addClass('active'); 
	$(".image_thumb ul li").click(function(){ 
		//Set Variables
		var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
		var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
		var imgDesc = $(this).find('.block').html(); 	//Get HTML of block
		var imgDescHeight = $(".main_image").find('.block').height();	//Calculate height of block	
		
		if ($(this).is(".active")) {  //If it's already active, then...
			return false; // Don't click through
		} else {
			//Animate the Teaser				
			$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
				$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,	marginBottom: "0" }, 250 );
				$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
			});
		}
		
		$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
		$(this).addClass('active');  //add class of 'active' on this list only
		return false;
		
	}) .hover(function(){
		$(this).addClass('hover');
		}, function() {
		$(this).removeClass('hover');
	});
			
	//Toggle Teaser
	$("a.collapse").click(function(){
		$(".main_image .block").slideToggle();
		$("a.collapse").toggleClass("show");
	});
	
});//Close Function
</script>

Copy All x2

<div id="main" class="container">
	<div class="main_image">
		<img src="banner5.jpg" alt="Puzzled Putter">
		<div style="display: block;" class="desc">
			<a href="#" class="collapse">Close Me!</a>
			<div style="opacity: 0.85; margin-bottom: 0px; display: block;" class="block">
					<h2>Puzzled Putter</h2>
					<small>04/14/09</small>
					<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. <br><a href="http://store.glennz.com/puzzledputter.html" target="_blank">Artwork By Glenn Jones</a></p>
				</div>
		</div>
	</div>
	<div class="image_thumb">
		<ul>
			<li class="">
				<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner1.jpg"><img src="banner1_thumb.jpg" alt="Slowing Dow"></a>
				<div class="block">
					<h2>Slowing Down</h2>
					<small>04/10/09</small>
					
					<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et.<br><a href="http://store.glennz.com/slowingdown.html" target="_blank">Artwork By Glenn Jones</a> </p>
				</div>
			</li>
			<li class="">
				<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner2.jpg"><img src="banner2_thumb.jpg" alt="Organized Food Fight"></a>
				<div class="block">
					<h2>Organized Food Fight</h2>
					<small>04/11/09</small>
					<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. Autem conventio nimis quis ad, nisl secundum sed,
facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam
validus eum quadrum, volutpat et.</p>
					<p>Autem conventio nimis
quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem.
Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br><a href="http://store.glennz.com/orfofi.html" target="_blank">Artwork By Glenn Jones</a></p>
				</div>
			</li>
			<li class="">
				<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner3.jpg"><img src="banner3_thumb.jpg" alt="Endangered Species"></a>
				<div class="block">
					<h2>Endangered Species</h2>
					<small>04/12/09</small>
					<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et.<br><a href="http://store.glennz.com/ensp.html" target="_blank">Artwork By Glenn Jones</a></p>
				</div>
			</li>
			<li class="">
				<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner4.jpg"><img src="banner4_thumb.jpg" alt="Evolution"></a>
				<div class="block">
					<h2>Evolution</h2>
					<small>04/13/09</small>
					<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. Autem conventio nimis quis ad, nisl secundum sed,
facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam
validus eum quadrum, volutpat et.<br><a href="http://store.glennz.com/evolution.html" target="_blank">Artwork By Glenn Jones</a></p>
				</div>
			</li>
			<li class="active hover">
				<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner5.jpg"><img src="banner5_thumb.jpg" alt="Puzzled Putter"></a>
				<div class="block">
					<h2>Puzzled Putter</h2>
					<small>04/14/09</small>
					<p>Autem
conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue
regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum,
volutpat et. <br><a href="http://store.glennz.com/puzzledputter.html" target="_blank">Artwork By Glenn Jones</a></p>
				</div>
			</li>
			<li class="">
				<a href="http://www.sohtanaka.com/web-design/examples/image-rotator/banner6.jpg"><img src="banner6_thumb.jpg" alt="Secret Habit"></a>
				<div class="block">
					<h2>Secret Habit</h2>
					<small>04/15/09</small>
					<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem.<br><a href="http://store.glennz.com/secrethabit1.html" target="_blank">Artwork By Glenn Jones</a></p>
				</div>
			</li>
		</ul>
	</div>
</div>

Comment (2)
Write

by Tora, 08/01/2011 11:01 PM
Reply

co gi ban huong dan minh lam nha,neu ko tien thi gui code cho minh vao email.Thanks

by Cao Phong, 10/01/2011 10:01 AM
Ä‘Ã£ Ä‘á»ƒ báº¡n pháº£i Ä‘á»£i lÃ¢u Reply

Ä‘Ã£ cÃ³ bÃ i viáº¿t hÆ°á»›ng dáº«n xÃ¢y dá»±ng hiá»‡u á»©ng nÃ y khÃ¡ chi tiáº¿t, báº¡n cÃ³ thá»ƒ xem táº¡i <url="http://www.javascriptbank.com/guide-create-an-awesome-javascript-image-rotator-jquery.html/vi/">HÆ°á»›ng dáº«n táº¡o khung trÆ°ng bÃ y áº£nh tuyá»‡t Ä‘áº¹p vá»›i jQuery</url>

cÃ³ gÃ¬ tháº¯c máº¯c thÃ¬ báº¡n cá»© post trong bÃ i viáº¿t Ä‘Ã³ luÃ´n nhÃ©

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language

Dall-E-OpenAI.com
Generate creative images automatically with AI

AIVideo-App.com
Render creative video automatically with AI

Cool Domains for Sale!

index.services XMQV.com ChatTotal.com choose.exchange this.bid CoinHolo.com Card.rip CryptoKD.com ApexBTC.com choose.works war.money CreditCard.rip ChainTutor.com pornID.net ABP3.com eChainBank.com ZWVQ.com system.money YeuNu.com CTRCoin.com

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

07/01/2011
Soh Tanaka [more]
9,389
2
1
0
0.19 KBytes

Awesome JavaScript Image Rotator with jQuery

5/5 1 votes / 9,389 previews / 2 comment 07/01/2011 This is an awesome image rotator JavaScript using jQuery to perform animation, ...Awesome JavaScript Image Rotator with jQuery - Awesome JavaScript Image Rotator with jQuery

duydong_hero vietnux[2] haquochnk[2] hoangha2010 Cao Phong[5]

Let's be first member to do this