Bonjour à tous amis alsanautes.
J'ai un problème sur le slideshow que je suis en train de créer.
J'ai 4 bannières qui défilent de haut en bas.
Une fois arrivé à la dernière images elles remontent à la première image.
En passant la souris dessus, le slideshow s'arrete. Si une animation était en cours, l'image remonte à la dernière position "correcte" connue.
Quand la souris ressort du slideshow, celui-ci reprend son processus.
Mon problème arrive dans cette dernière partie:
Si ma souris entre dans mon bloc pendant un slide, quand elle ressort tout va bien, l'animation suit son cours.
Mais si elle rentre dans le bloc quand l'image est fixe, alors 9 fois sur 10 l'animation s'emballe et défile à des vitesses aléatoires.
Je vous met le code:
et le js:
Et pour finir, le css:
Voilà vous savez tout.
Est-ce que quelqu'un peut m'expliquer pourquoi ça s'emballe, ou est-ce que j'ai fauté, etc, je lui en serai très reconnaissant !
J'ai un problème sur le slideshow que je suis en train de créer.
J'ai 4 bannières qui défilent de haut en bas.
Une fois arrivé à la dernière images elles remontent à la première image.
En passant la souris dessus, le slideshow s'arrete. Si une animation était en cours, l'image remonte à la dernière position "correcte" connue.
Quand la souris ressort du slideshow, celui-ci reprend son processus.
Mon problème arrive dans cette dernière partie:
Si ma souris entre dans mon bloc pendant un slide, quand elle ressort tout va bien, l'animation suit son cours.
Mais si elle rentre dans le bloc quand l'image est fixe, alors 9 fois sur 10 l'animation s'emballe et défile à des vitesses aléatoires.

Je vous met le code:
<div id="visible">
<div id="slides" style="top: -438px;">
<div id="slide_4" class="banner ">
</div>
<div id="slide_3" class="banner">
</div>
<div id="slide_2" class="banner">
</div>
<div id="slide_1" class="banner">
</div>
</div>
<div id="bloc_droite">
<ul>
<li id="titre_slide_1" class="active">Bla bla bla</li>
<li id="titre_slide_2">Bli bli bli</li>
<li id="titre_slide_3">Blou blou blou</li>
<li id="titre_slide_4">blu blu blu</li>
</ul>
</div>
</div>
et le js:
var currentPosition = 1;
var n = 0;
var slides = $('.banner');
var liBanner = $('#bloc_droite li');
var slidesCount = slides.length;
var obj = $(this);
function deplacement(){
var delai = 5000;
var duree = 500;
if(currentPosition == slidesCount){
currentPosition = 0;
$('#slides').delay(delai).animate({top: '-438px'}, duree, function(){
$("#bloc_droite li:first-child").addClass("active");
$("#bloc_droite li:last-child").removeClass("active");
deplacement();
});
}else{
$('#slides').delay(delai).animate({top: '+=146'}, duree, function(){
$("#bloc_droite li.active").next().addClass("active").prev().removeClass("active");
deplacement();
});
}
currentPosition++;
}
deplacement();
$('#bloc_droite li').click( function(){
var num = $(this).index();
var multiply = (slidesCount - num - 1)*(-146);
$('#slides').animate({top: multiply + 'px'}, 500);
liBanner.removeClass('active');
$(this).addClass('active');
});
$('#visible').mouseenter( function(){
$('#slides').stop(true, false);
var num = $('#bloc_droite li.active').index();
var multiply = (slidesCount - num - 1)*(-146);
$('#slides').animate({top: multiply + 'px'}, 200);
});
$('#visible').mouseleave( function(){
currentPosition = $('#bloc_droite li.active').index();
currentPosition = currentPosition + 1;
deplacement();
});
Et pour finir, le css:
#visible{
width: 750px;
height: 146px;
margin: 50px auto;
position: relative;
overflow: hidden;
background: #f1f1f1;
}
#bloc_droite{
width: 191px;
height: 136px;
position: absolute;
right: 0;
top: 0;
padding: 10px 0 0 10px;
background: rgb(202,224,239);
}
#bloc_droite ul{
list-style-type: none;
color: #727272;
padding: 0;
}
#bloc_droite ul li{
margin: 5px 0;
width: 191px;
padding: 0 0 0 20px;
float: right;
cursor: pointer;
}
#bloc_droite ul li.active{
background: rgba(11, 100, 170, 0.37);
color: #fff;
}
.banner{
width: 549px;
height: 146px;
}
#slides{
position: absolute;
left: 0;
}
#slide_1{
background: url('../img/img_1.jpg');
}
#slide_2{
background: url('../img/img_2.jpg');
}
#slide_3{
background: url('../img/img_3.jpg');
}
#slide_4{
background: url('../img/img_4.jpg');
}
Voilà vous savez tout.
Est-ce que quelqu'un peut m'expliquer pourquoi ça s'emballe, ou est-ce que j'ai fauté, etc, je lui en serai très reconnaissant !
