images de diapositives automatiquement et manuellement

pour un curseur sur l'image que j'utiliser ce codeimages de diapositives automatiquement et manuellement

var sliderIndex = 0; 
 

 
function initializeImageSlider() { 
 
    var sliderImages = $(".sliderImg"); 
 

 
    for (var i = 0; i < sliderImages.length; i++) { 
 
     sliderImages[i].style.display = "none"; 
 
    } 
 
    sliderIndex++; 
 
    if (sliderIndex > sliderImages.length) { 
 
     sliderIndex = 1; 
 
    } 
 
    sliderImages[sliderIndex-1].style.display = "block"; 
 
    setTimeout(initializeImageSlider, 5000); 
 
} 
 

 
function changeSliderImage(direction) { 
 
    sliderIndex += direction; 
 
    alert("move " + direction); 
 
}

#containerImageSlider { 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.sliderImg{ 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body onLoad="initializeImageSlider()"> 
 

 
<button onclick="changeSliderImage(-1)">-</button> 
 
<div id="containerImageSlider"> 
 
    <img class="sliderImg" src="Resources/sliderImg1.png"> 
 
    <img class="sliderImg" src="Resources/sliderImg2.png"> 
 
    <img class="sliderImg" src="Resources/sliderImg3.png"> 
 
    <img class="sliderImg" src="Resources/sliderImg4.png"> 
 
    <img class="sliderImg" src="Resources/sliderImg5.png"> 
 
</div> 
 
<button onclick="changeSliderImage(1)">+</button> 
 

 
</body>

Ainsi, le curseur automatique fonctionne très bien. Maintenant j'ai ajouté deux boutons, ils appellent la fonction changeSliderImage(direction) où je passe une valeur pour avancer ou reculer.

Comme vous pouvez le voir, actuellement j'utilise simplement la fonction initializeImageSlider() pour avoir un curseur automatique.

Comment puis-je créer une fonction, pour que ce processus automatique et manuel fonctionne?

Je ne comprends pas, comment diviser ma fonction initializeImageSlider() pour cela.

Source

2017-08-14 peterHasemann

ici est un [jsbin] (http://jsbin.com/pigarilugo/edit?html,output) qui fera exactement, si vous voulez i va l'ajouter comme réponse ci-dessous. – nivas

Vous pouvez créer une fonction updateImageSlider() qui ne met à jour que le curseur, que le sliderIndex augmente ou diminue. Ensuite, vous appelez simplement cette méthode chaque fois que le compte à rebours atteint 5 secondes ou lorsque l'utilisateur clique sur les boutons.

Ce code doit faire ce que vous voulez:

var sliderIndex = 0; 

function updateImageSlider() { 
    var sliderImages = $(".sliderImg"); 

    for (var i = 0; i < sliderImages.length; i++) { 
     sliderImages[i].style.display = "none"; 
    } 
    if (sliderIndex > sliderImages.length) { 
     sliderIndex = 1; 
    } 
    else if (sliderIndex < 1) { 
     sliderIndex = sliderImages.length; 
    } 
    sliderImages[sliderIndex-1].style.display = "block"; 
} 

var autoSlideHandler; // To reset the timer 
function incrementImageSlider() { 
    sliderIndex++; 
    updateImageSlider(); 
    autoSlideHandler = setTimeout(incrementImageSlider, 5000); 
} 

function changeSliderImage(direction) { 
    // Move the slider 
    sliderIndex += direction; 
    updateImageSlider(); 
    alert("move " + direction); 
    // Reset the timer 
    clearTimeout(autoSlideHandler); 
    autoSlideHandler = setTimeout(incrementImageSlider, 5000); 
} 

$(incrementImageSlider); // Initialize the slider, function called on page load

Source

2017-08-14 09:38:59

images de diapositives automatiquement et manuellement

Répondre

Questions connexes