« »

Il s'agit d'un impressionnant rotator image JavaScript en utilisant jQuery pour effectuer une animation, avec un peu de CSS pour le style Vous pouvez

Étiquette: rotator image JavaScript, rotator image jQuery, image diaporama JavaScript, galerie d'images Javascript

Rapport de nous cette erreur JavaScript

Demo
Agrandir
Recharger
New window

Gratuit iPage hébergement Web pour la première année MOMENT

Si vous êtes toujours à la recherche d'un fournisseur d'hébergement Web fiable avec des tarifs abordables, pourquoi vous ne prenez pas un peu de temps pour essayer iPage, seulement avec $1.89/month, inclus $500+ Crédits supplémentaires gratuites pour le paiement de 24 mois ($45)?

Plus de 1.000.000 de clients + existisng peuvent pas avoir tort, vraiment vous n'êtes pas aussi! Plus important encore, lorsque vous enregistrez l'hébergement web à iPage grâce à notre lien, nous allons être heureux de renvoyer un plein remboursement. C'est génial! Vous devriez essayer iPage hébergement web GRATUITEMENT maintenant! Et contactez-nous pour tout ce que vous devez savoir sur iPage. Essayez iPage GRATUIT première année MOMENT

Code
CSS
JavaScript
HTML
Imprimer

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>

Commentaire (2)
Écrire

par Tora, 08/01/2011 11:01 PM
Réponse

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

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

Ä‘Ã£ 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Ã©

par Avant-première

Annuler réponse

Écrivez votre commentaire

Commentaires du client sera publié avant previwed
Donnez votre email réel pour obtenir des réponses notification ou commentaire sera supprimé

Votre nom *
Votre e-mail^g *
~~Votre site~~

Comment's Titre

J'assure à 100% je suis humain réel
Je le répète, je ne suis pas bot

Sent (0)
Nouveau

BBCode
HTML
URL
JID

Déposer jours:
Auteur:
Previews:
Commentaire:
Votes:
Sent:
Taille:
Rang:

07/01/2011
Soh Tanaka [more]
8,151
2
1
0
0.19 KBytes

Awesome JavaScript Image Rotator avec jQuery - Langue: Française

5/5 1 votes / 8,151 previews / 2 commentaire 07/01/2011 Il s'agit d'un impressionnant rotator image JavaScript en utilisant jQuery pour...Awesome JavaScript Image Rotator avec jQuery - Awesome JavaScript Image Rotator avec jQuery - Langue: Française

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

Soyons premier membre de le faire