begin process at 2012 05 29 09:05:44
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

Javascript et ActiveX

 > 

Autre

 > 

Glissement automatique

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Glissement automatique

samedi 20 novembre 2010 à 13:06:44 | Glissement automatique

ciranox
Bonjour,

J'ai essayé de modifier mon script de mon diaporama pour que les images puissent glisser automatiquement.

Voici le script en question:

Code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery thumbnail scroller</title>
<style type="text/css">
<!--
body {margin:0; padding:0; background:#000;}
#outer_container{margin:60px; width:240px; padding:0 10px; border-top:1px solid #666; border-bottom:1px solid #666;}
#thumbScroller{position:relative; height:600px; overflow:hidden;}
#thumbScroller .container{position:relative; top:0;}
#thumbScroller .content{clear:both;}
#thumbScroller .content div{padding:10px 5px; height:100%; font-family:Verdana, Geneva, sans-serif; font-size:13px;}
#thumbScroller img{border:5px solid #fff;}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>

<body>
<div id="outer_container">
<div id="thumbScroller">
	<div class="container">
    	<div class="content">
        	<div><a href="#"><img src="thumbs/thumb1.jpg" title="The path" alt="The path" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb2.jpg" title="A flower" alt="A flower" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb3.jpg" title="Dusk" alt="Dusk" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb4.jpg" title="A waterfall" alt="A waterfall" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb5.jpg" title="The canyon" alt="The canyon" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb6.jpg" title="The road" alt="The road" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb7.jpg" title="A forest" alt="A forest" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb8.jpg" title="A house" alt="A house" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb9.jpg" title="Paradise" alt="Paradise" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb10.jpg" title="Trees" alt="Trees" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb11.jpg" title="Plant leaves" alt="Plant leaves" class="thumb" /></a></div>
        </div>
	</div>
</div>
</div>
<script>
	$outer_container=$("#outer_container");
	$thumbScroller=$("#thumbScroller");
	$thumbScroller_container=$("#thumbScroller .container");
	$thumbScroller_content=$("#thumbScroller .content");
	$thumbScroller_thumb=$("#thumbScroller .thumb");
	
	$(window).load(function() {
		var sliderHeight=$thumbScroller.height();
		var itemHeight=$thumbScroller_content.height();

		$thumbScroller_content.each(function (i) {
			totalContent=i*itemHeight;	
		});

		$thumbScroller.mousemove(function(e){
	  		var mouseCoords=(e.pageY - this.offsetTop);
	  		var mousePercentY=mouseCoords/sliderHeight;
	  		var destY=-(((totalContent-(sliderHeight-itemHeight))-sliderHeight)*(mousePercentY));
	  		var thePosA=mouseCoords-destY;
	  		var thePosB=destY-mouseCoords;
	  		if(mouseCoords>destY){
		  		$thumbScroller_container.css("top",-thePosA);
	  		}
	  		if(mouseCoords<destY){
		  		$thumbScroller_container.css("top",thePosB);
	  		}
		});

		var fadeSpeed=250;

		$thumbScroller_thumb.each(function () {
			var $this=$(this);
			$this.fadeTo(fadeSpeed, 0.4);
		});

		$thumbScroller_thumb.hover(
			function(){ //mouse over
				var $this=$(this);
				$this.stop().fadeTo(fadeSpeed, 1);
			},
			function(){ //mouse out
				var $this=$(this);
				$this.stop().fadeTo(fadeSpeed, 0.4);
			}
		);
	});
</script>
</body>
</html>


Merci d'avance.
A++
samedi 20 novembre 2010 à 22:05:48 | Re : Glissement automatique

PetoleTeam

Membre Club
Bonjour,
comme tu utiises jQuery voir du côté de la méthode animate()

;O)


Cette discussion est classée dans : var, content, container, thumbscroller, mousecoords

Répondre à ce message

Sujets en rapport avec ce message

probleme affichage/masquer menu vertical [ par neolin85 ] Bonjour à tous, j'ai developpé un petit code qui permet de faire un menu horizontal avec des menus verticaux pour chaque clique sur le menu.J'ai un pe Modification d'un script [ par biloute54 ] Bonjour à tous, Je souhaiterais modifier un script de la manière suivante : dans ce script il y a un menu déroulant pour faire un choix et en cliqua probleme script de creation d'un input [ par javalhoussain ] voila le problème que je rencontre avec ce script : si je clique sur le bouton normalement un input doit être crée mais ce n'est pas le cas.Mais si je Probleme avec Internet Explorer [ par theopil ] Bonjour, Voila donc j'utilise un script pour faire un compte a rebour  sous FF sa fonction sans soucie mes sous IE cela me marque serveur introuvable javascript / Menu horizontal dynamique [ par Neiflheim1 ] Bonjour à tous,Ca fais bien 3-4jours que je cherche en vain la solution à mon probleme. Mon menu dynamique marche, mais l'image de fond ne s'affiche p Problème de création javascript dynamiquement [ par GoldPegasus ] Bonjourj'ai un soucis avec des élements que je crée dynamiquementvoici le code      var ligne = document.createElement("tr");   var col = document.cre Défilement et redimensionnement de photos [ par jems87 ] Bonjour,Je commence à apprendre Java. J'ai trouvé 2 scripts qui m'intéressent : un qui fait défiler des photos avec un fondu, l'autre qui permet de re Envois formulaire XMLHttpRequest POST BDD [ par Annadrill ] bonjour,alors voilà, cela fait trois jours que je tourne en rond avec un problème qui à l'air idiot mais que je n'arrive à résoudre.je m'explique, j'a Question [ par ichigokurosaki ] Bonjour,Bon voilà, j'ai un petit souci avec ce code :test  var saisie = ""; var compteur = 1; GetElementByTagName dans un tableau [ par jubourbon ] Bonjour à tous,J'ai une fonction, qui me permet de recuperer des avleurs dans un tableau, de rechercher des Expressions Regulieres, puis de les modifi


Nos sponsors


Sondage...

Comparez les prix


Archos 5 Internet Tablette 500 Go
Entre 396€ et 444€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,577 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)