[RESOLU] création d'un slider problème d'arret de setInterval()

par **Elie** » 12 janv. 2015, 16:51

Sinon hein biensur

http://www.jqueryscript.net/demo/Basic- ... uisina-js/

par **hakazizi** » 11 janv. 2015, 12:20

régler avec une condition :

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html>
<head>
         <title>slider</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
         <style type="text/css">
 * {margin:0;padding0;}
     .photo {
 position:relative;
        width: 1170px;  
        height: 640px;
        overflow: hidden;  
 background-color:#777777;margin-left:auto;margin-right:auto;
     }  
      
     .photo ul {  
         /* nombre de photo x 100% */  
        width: 300px;  
        height: 100%;  
        padding:0; margin:0;  
        list-style: none;  
     }  
     .photo li { 

        float: left;  
     }  
 img.slider{margin-left:345px;margin-right:345px}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script type="text/javascript">
var numerique=2;
var chaine='k';
var identifiant=0;
var identifiant1='p';
var identifiant2='l';
var hautfenetre=640;
var largfenetre=1170;
var largmarge=345;
var largmargephoto=345;
var largphoto=480;
var couleurfond="#777777";
 if(window.innerWidth<1190){
hautfenetre=Math.round((640*(window.innerWidth-20))/1170);
largmarge=Math.round(345*((640*(window.innerWidth-20))/1170)/640);
largmargephoto=largmarge;
largfenetre=window.innerWidth-20;
largphoto=largfenetre-((345*((640*(window.innerWidth-20))/1170)/640)*2);
} 
if(largfenetre<480){
largmargephoto=0;
largphoto=largfenetre;
hautfenetre=Math.round((640*largfenetre)/480);
couleurfond="#FFFFFF";
}















$(function(){  
	$(".photo").css({width:largfenetre,'background-color':couleurfond});
	$(".photo,.precsuiv").css({height:hautfenetre});
	$(".precsuiv").css({width:largmarge});
	$(".slider").css({'margin-left':largmargephoto,'margin-right':largmargephoto,width:largphoto});














       var refreshIntervalId = setInterval(function(){
if(identifiant<1 || identifiant>3){
identifiant=1;
}
numerique=identifiant;
chaine=numerique;
identifiant1=identifiant;
identifiant1=identifiant2+numerique;




if(identifiant==1){
identifiant1=identifiant2+identifiant;
}
		$("#"+identifiant1).hide("slide",{direction:"left"},500); /* li cacher */ 
identifiant=identifiant+1;
if(identifiant>3){
identifiant=1;
}


identifiant1=identifiant2+identifiant;

			$("#"+identifiant1).show("slide",{direction:"right"},500); /* li suivante afficher */


   		
		
		

		/* find("li:last").after($(".photo ul").find("li:first")); */
       }, 5000); 
           
		   
		   
		/* $(".photo ul li").show("slide",{direction:"right"},500);} */



   
		   

		   


		   
		   
		

   
		   
		   
		   
		   
		   
		   
          /*  $('.precsuiv').on('click', function(e) { */
         /*           e.preventDefault(e); */
         /*           clearInterval(refreshIntervalId); */     /* On arrete le setInterval */
         /*           var _width = $(this).attr('data-width'); */
         /*           $(".photo ul").animate({marginLeft: _width},800,function(){  */ 
          /*                        $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));  */ 
           /*         }); */
     /*  refreshIntervalId = setInterval(function(){   */
      /*     $(".photo ul").animate({marginLeft:-1170},800,function(){   */
      /*        $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first")); */
       /*    })   */
     /*   }, 5000);  */
/* }); */
    });
</script>

</head>
<body>
<script>document.write("Cette fen&ecirc;tre fait " +largfenetre+ " de large et "+hautfenetre+" de haut la largeur de la marge "+largmarge+" pixel");</script>
         <div id="photo" class="photo">
         <span data-width="-1170" class="precsuiv" style="background: url(images/fleche-gauche.gif) no-repeat 10px center;width:345px;height:100%;position:absolute;z-index:2;cursor:pointer;"></span>
                 <ul id="ul_photo">
                        <li id="l1"><img class="slider" src="images/costume-danse-orientale-voile-rouge-profile.jpg" title="" alt="" /></li>
                        <li id="l2"><img class="slider" src="images/costume-danse-orientale-voile-rouge-dos.jpg" title="" alt="" /></li>
                        <li id="l3"><img class="slider" src="images/costume-danse-orientale-voile-rouge.jpg" title="" alt="" /></li>
                 </ul>
         <span data-width="1170" class="precsuiv" style="background: url(images/fleche-droite.gif) no-repeat 323px center;width:345px;height:100%;position:absolute;top:0;right:0;z-index:2;cursor:pointer;"></span>
         </div>
</body>
</html>

par **hakazizi** » 08 janv. 2015, 15:22

bonjour nouveau problème
la première version de mon slide (marginLeft: XX) présentait un défaut au niveau visuel au retour en arrière
j'ai donc essayer hide(slide) et show(slide) dans Jqueryui.
le problème qui se présente :
après le hide de la première photo un long temps vide. puis affichage des 2 premières photos sans arrêt intermédiaire la troisième ne s'affiche jamais.
dans la version final je ne sait pas combien de photo cela peut varier d'une page à l'autre.
merci.
visible à l'url ci dessous:
http://fr.larosedelorient.com/slider.php
et voici le code utilisé

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html>
<head>
         <title>slider</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
         <style type="text/css">
 * {margin:0;padding0;}
     .photo {
 position:relative;
        width: 1170px;  
        height: 640px;
        overflow: hidden;  
 background-color:#777777;margin-left:auto;margin-right:auto;
     }  
      
     .photo ul {  
         /* 3 images donc 3 x 100% */  
        width: 300%;  
        height: 100%;  
        padding:0; margin:0;  
        list-style: none;  
     }  
     .photo li { 

        float: left;  
     }  
 img.slider{margin-left:345px;margin-right:345px}
img.slider1{margin-left:345px;margin-right:345px}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script type="text/javascript">
 $(function(){  

       var refreshIntervalId = setInterval(function(){
		$(".photo ul li").hide("slide",{direction:"left"},500, /* li cacher */ function(){
			$(this).next('li').show("slide",{direction:"right"},500); /* li suivante afficher */
});
		find("li:last").after($(".photo ul").find("li:first"));
       }, 5000); 
           /*  $('.precsuiv').on('click', function(e) { */
         /*           e.preventDefault(e); */
         /*           clearInterval(refreshIntervalId); */     /* On arrete le setInterval */
         /*           var _width = $(this).attr('data-width'); */
         /*           $(".photo ul").animate({marginLeft: _width},800,function(){  */ 
          /*                        $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));  */ 
           /*         }); */
     /*  refreshIntervalId = setInterval(function(){   */
      /*     $(".photo ul").animate({marginLeft:-1170},800,function(){   */
      /*        $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first")); */
       /*    })   */
     /*   }, 5000);  */
/* }); */
    });
</script>

</head>
<body>
<div>lkbfnlkbfkllkklkklflkmlfflkùldflùfkbnlnblkrl,klf,lk,flklbklk,blfd</div><div>lkbfnlkbfkllkklkklflkmlfflkùldflùfkbnlnblkrl,klf,lk,flklbklk,blfd</div><div>lkbfnlkbfkllkklkklflkmlfflkùldflùfkbnlnblkrl,klf,lk,flklbklk,blfd</div><div>lkbfnlkbfkllkklkklflkmlfflkùldflùfkbnlnblkrl,klf,lk,flklbklk,blfd</div>
         <div id="photo" class="photo">
         <span data-width="-1170" class="precsuiv" style="background: url(images/fleche-gauche.gif) no-repeat 10px center;width:345px;height:100%;position:absolute;z-index:2;cursor:pointer;"></span>
                 <ul id="ul_photo">
                         <li><img class="slider" src="images/1.jpg" title="" alt="" /></li>
                         <li><img class="slider" src="images/2.jpg" title="" alt="" /></li>
                         <li><img class="slider" src="images/3.jpg" title="" alt="" /></li>
                 </ul>
         <span data-width="1170" class="precsuiv" style="background: url(images/fleche-droite.gif) no-repeat 323px center;width:345px;height:100%;position:absolute;top:0;right:0;z-index:2;cursor:pointer;"></span>
         </div>

</body>
</html>

P.S. J'ai voulu changé le titre pour le mettre en rapport avec le problème actuel je ne sait pas comment faire...

par **hakazizi** » 05 janv. 2015, 23:42

Merci Elie.
vue mon niveau en anglais j'ai zapper tous les résultats en anglais.
j'ai essayé les solutions toutes prête mais je n'ai pas réussit a les paramétrer pour avoir le résultat final voulue.

par **Elie** » 05 janv. 2015, 22:56

Google m'a donné a la solution ... http://stackoverflow.com/questions/1090 ... javascript

J'en ai profité pour simplifier un peu mais je comprend pas pourquoi tu prend pas un truc tout fait

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html>
<head>
        <title>slider</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
* {margin:0;padding0;}
    .photo {
position:relative;
       width: 1170px;  
       height: 640px;  
       overflow: hidden;  
background-color:#777777;margin-left:auto;margin-right:auto;
    }  
     
    .photo ul {  
        /* 4 images donc 4 x 100% */  
       width: 300%;  
       height: 640px;  
       padding:0; margin:0;  
       list-style: none;  
    }  
    .photo li {  
       float: left;  
    }  
img.slider{margin-left:345px;margin-right:345px;}

</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script type="text/javascript">
$(function(){  

     var refreshIntervalId = setInterval(function(){  
         $(".photo ul").animate({marginLeft:-1170},800,function(){  
            $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
         })  
      }, 3500); 
	  
	  $('.precsuiv').on('click', function(e) {
		  e.preventDefault(e);
		  clearInterval(refreshIntervalId);	/* On arrete le setInterval */
		  var _width = $(this).attr('data-width');
		  $(".photo ul").animate({marginLeft: _width},800,function(){  
				$(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));  
		  });
	  });
   });
</script>

</head>
<body>
        <div id="photo" class="photo">
        <span data-width="-1170" class="precsuiv" style="width:345px;height:100%;position:absolute;z-index:2;cursor:pointer;">suivant</span>
                <ul id="ul_photo">
                        <li><img class="slider" src="images/1.jpg" title="" alt="" /></li>
                        <li><img class="slider" src="images/2.jpg" title="" alt="" /></li>
                        <li><img class="slider" src="images/3.jpg" title="" alt="" /></li>
                </ul>
        <span data-width="1170" class="precsuiv" style="width:345px;height:100%;position:absolute;top:0;right:0;z-index:2;cursor:pointer;">precedent</span>
        </div>

</body>
</html>

par **hakazizi** » 05 janv. 2015, 22:26

Bonjour,
je suis actuellement sur la création d'un slideshow,
ma fonction stop(); n'arrête pas la répétitions setInterval(); au click de précédent, suivant.
Je n'ai trouvé que cette fonction pour interrompre setInterval.
Merci

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html>
<head>
	<title>slider</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<style type="text/css">
* {margin:0;padding0;}
    .photo { 
position:relative;
       width: 1170px;  
       height: 640px;  
       overflow: hidden;  
background-color:#777777;margin-left:auto;margin-right:auto;
    }  
      
    .photo ul {  
        /* 4 images donc 4 x 100% */  
       width: 300%;  
       height: 640px;  
       padding:0; margin:0;  
       list-style: none;  
    }  
    .photo li {  
       float: left;  
    }  
img.slider{margin-left:345px;margin-right:345px;}

</style>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript">
$(function(){  
      setInterval(function(){  
         $(".photo ul").animate({marginLeft:-1170},800,function(){  
            $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
         })  
      }, 3500);  
   });
   
   

   
   
   
   
function precedent(){ 
$(function() {
  $(".photo ul").stop(true, false);
});   
$(function(){  
         $(".photo ul").animate({marginLeft:1170},800,function(){  
            $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));  
         })   
   });}

function suivant(){ 
$(function() {
  $(".photo ul").stop(true, false);
});   
$(function(){  
         $(".photo ul").animate({marginLeft:-1170},800,function(){  
            $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));  
         })   
   });}
</script>

</head>
<body>
	<div id="photo" class="photo">
	<span onclick="suivant();" class="precsuiv" style="width:345px;height:100%;position:absolute;z-index:2;cursor:pointer;">suivant</span>
		<ul id="ul_photo">
			<li><img class="slider" src="images/1.jpg" title="" alt="" /></li>
			<li><img class="slider" src="images/2.jpg" title="" alt="" /></li>
			<li><img class="slider" src="images/3.jpg" title="" alt="" /></li>
		</ul>
	<span onclick="precedent();" class="precsuiv" style="width:345px;height:100%;position:absolute;top:0;right:0;z-index:2;cursor:pointer;">precedent</span>
	</div>

</body>
</html>

[RESOLU] création d'un slider problème d'arret de setInterval()

Répondre

Étendre la vue Revue du sujet : [RESOLU] création d'un slider problème d'arret de setInterval()

Re: [RESOLU] création d'un slider problème d'arret de setInt

Re: création d'un slider problème d'arret de setInterval()

Re: création d'un slider problème d'arret de setInterval()

Re: création d'un slider problème d'arret de setInterval()

Re: création d'un slider problème d'arret de setInterval()

création d'un slider problème d'arret de setInterval()