Image défilante HTML [Fermé]

Signaler
-
 MrKash -
Bonjour,

J'ai un site ( chez wiféo ) et j'aimerais mettre des ' new ' comme sur ce site : http://www.minefield.fr/
Image + texte qui défile en accueil, comment faire ?? merci
A voir également:

4 réponses

Messages postés
459
Date d'inscription
lundi 18 octobre 2010
Statut
Membre
Dernière intervention
15 juin 2018
109
je donne la source du slider proposer par soft1ne.

https://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption

Même s'il est gratuit, c'est toujours sympa de mettre un lien vers le vrai concepteur du code, et c'est plus simple de le voir en images. ;)
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

je ne connais pas le principe de wiféo, mais si tu veux le code je peux te le donner, le voici :









<script type="text/javascript" src="http://www.queness.com/resources/html/slideshow/js/jquery-1.3.1.min.js"></script> 
<script type="text/javascript"> 
 
$(document).ready(function() {		
	
	//Execute the slideShow
	slideShow();
 
});
 
function slideShow() {
 
	//Set the opacity of all images to 0
	$('#gallery a').css({opacity: 0.0});
	
	//Get the first image and display it (set it to full opacity)
	$('#gallery a:first').css({opacity: 1.0});
	
	//Set the caption background to semi-transparent
	$('#gallery .caption').css({opacity: 0.7});
 
	//Resize the width of the caption according to the image width
	$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
	
	//Get the caption of the first image from REL attribute and display it
	$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
	.animate({opacity: 0.7}, 400);
	
	//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('gallery()',5000);
	
}
 
function gallery() {
	
	//if no IMGs have the show class, grab the first image
	var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));
 
	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));	
	
	//Get next image caption
	var caption = next.find('img').attr('rel');	
	
	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);
 
	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
	//Set the opacity to 0 and height to 1px
	$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:50 }).animate({height: '1px'}, { queue:true, duration:300 });	
	
	//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
	$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
	
	//Display the content
	$('#gallery .content').html(caption);
	
	
}
 
</script> 
<style type="text/css"> 

 
.clear {
	clear:both
}
 
#gallery {
	position:relative;
top:30px;
	height:400px


}
	#gallery a {
		float:left;
		position:absolute;
	}
	
	#gallery a img {
		border:none;
height:400px;
width:500px;
	}
	
	#gallery a.show {
		z-index:500
	}
 
	#gallery .caption {
-moz-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
		z-index:600; 
		background-color:#000; 
		color:#ffffff; 
		height:100px; 
		width:500px; 
		position:absolute;
		bottom:30px;
	}
 
	#gallery .caption .content {
		margin:5px;
font-size:20px;
	}
	
	#gallery .caption .content h3 {
		margin:0;
		padding:0;
		color:#1DCCEF;
	}
	
 
</style>

<br><br>
<div id=propose_accueil>
<div id="gallery"> 
 
	<a href="#" class="show"> 
		<img src="http://www.les-vegetaliseurs.com/media/cliches_natures/20080801_211018.jpg" alt="Flowing Rock" width="580" title="" alt="" rel="<h3>Nos Arbres</h3>Voici un de nos arbres centenaires. "/> 
	</a> 
	
	<a href="#"> 
		<img src="http://medias01.enjoyconstellation.com/f_1c37ec3e-609a-4d7e-9829-db6f10d93821_134.JPG" alt="Grass Blades" width="580" title="" alt="" rel="<h3>La miellerie</h3>Visitez la miellerie et apprenez comment le miel est fait. "/> 
	</a> 
	
	<a href="#"> 
		<img src="http://static.flickr.com/2614/3923931250_62c49f7e53.jpg" alt="Ladybug" width="580" title="" alt="" rel="<h3>Nos Bambous</h3>Découvrez notre forêt de bambous. "/> 
	</a> 
<a href="#"> 
		<img src="http://www.pyrenees-sante.com/wp-content/uploads/2010/12/miel.jpg" alt="Ladybug" width="580" title="" alt="" rel="<h3>Nos Miels</h3>Venez découvrir notre miel, et participez à une gustation gratuite. "/> 
	</a> 
 
 
	<div class="caption"><div class="content"></div></div> </div>



Je pense que ca devrait fonctionner
Donc pour info tu ne peux pas utiliser du HTML pour faire défiler des images (du moins pas avant du HTML5/CSS3 stable) il faut que tu utilises du JavaScript (utilise la librairie jQuery ça sera plus simple) comme par exemple le code de soft1ne, ce qui se trouve entre les balises <script> et </script>
Comment procéder avec Java ??
Merci
Le JavaScript, contrairement à ce que son nom indique, n'a rien à voir avec Java.

Tu peux trouver de bons tutos sur le siteduzero, je te conseille également de lire les tutos algorithmoqie et programmation orientée objet de commentcamarche également