Bonjour,
voila je n'y connais pas grand chose en JS mais j'aimerais savoir comment faire pour changer le BG de chaque slide a chaque fois qu'on clic sur la flèche pour naviguer d'un slide à l'autre.
je vous met mon code JS si ca peut aider des personnes.
Un grand merci au futur personnes qui m'aideront dans ma recherche
voila je n'y connais pas grand chose en JS mais j'aimerais savoir comment faire pour changer le BG de chaque slide a chaque fois qu'on clic sur la flèche pour naviguer d'un slide à l'autre.
je vous met mon code JS si ca peut aider des personnes.
Un grand merci au futur personnes qui m'aideront dans ma recherche
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 700;
var slides = $('.slide');
var numberOfSlides = slides.length;
var retour = true;
var tempsTransition = 1000;
var affichePlayPause = true;
var lectureAutomatique = false;
var tempsAttente = 6000;
var icones = new Array();
icones['play'] = 'img/play_slider.png';
icones['pause'] = 'img/pause_slider.png';
var interval;
var lectureEnCours = false;
$('#slidesContainer').css('overflow', 'hidden');
slides
.wrapAll('<div id="slideInner"></div>')
.css({
'float' : 'left',
'width' : slideWidth
});
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert les flèches de gauche et de droite
$('#slideshow')
.prepend('<span class="control" id="leftControl">Move left</span>')
.append('<span class="control" id="rightControl">Move right</span>');
manageControls(currentPosition);
$('.control')
.bind('click', function(){
// Determine une nouvelle position
currentPosition = ($(this).attr('id')=='rightControl')
? currentPosition+1 : currentPosition-1;
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
function manageControls(position){
if(position==0){ $('#leftControl').hide() }
else{ $('#leftControl').show() }
if(position==numberOfSlides-1){ $('#rightControl').hide() }
else{ $('#rightControl').show() }
}
if(position == numberOfSlides && retour == true){
currentPosition = 0;
$('#leftControl').hide();
}
});
function start() {
lectureEnCours = true;
interval = setInterval(suivant, tempsAttente );
}
function suivant(){
$('#rightControl').click();
}
function pause() {
lectureEnCours = false;
clearInterval(interval);
}
if(lectureAutomatique == true){
start();
}
if(affichePlayPause == true){
$('#slidesContainer').prepend('<img id="navDiapo" src="" alt="Navigation diaporama" />');
if(lectureAutomatique == true){
$('#navDiapo').attr('src',icones['pause']);
}else{
$('#navDiapo').attr('src',icones['play']);
}
$('#navDiapo').bind('click', function(){
if(lectureEnCours == true){
$(this).attr('src',icones['play']);
pause();
}else{
$(this).attr('src',icones['pause']);
start();
}
});
}
</script>