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>
