Bienvenue sur Stack Overflow. Je vous recommande de trouver quelques tutoriels sur javascript avant d'aborder jquery. La réalisation de certains tutoriels vous aidera à rédiger un meilleur code et à mieux comprendre vos questions lorsque vous serez bloqué.
Il semble que vous ayez créé 3 classes CSS avec des attributs d'image d'arrière-plan: flatironimg, kaynesimg et chiassoimg. Vous avez votre site cyclique les trois images à travers le div slideimg automatiquement, mais aussi de donner aux utilisateurs un bouton pour faire avancer les diapositives manuellement. Une fois que l'utilisateur a cliqué sur le bouton, vous ne voulez plus que le diaporama continue automatiquement.
Je ne suis pas un expert jquery, mais je peux vous donner un code qui devrait vous aider sur votre chemin. Je vais l'expliquer petit à petit ci-dessous - refactoring/contributions d'utilisateurs plus avancés bienvenus.
Javascript:
<script type="text/javascript">
var CLASS_ARRAY = ['flatironimg','kaynesimg','chiassoimg'];
var slideIndex = -1;
var automatic = true;
function nextSlide(){
$('#slideimg').fadeOut(600,function(){
slideIndex ++;
// Get the next highest item
if(slideIndex >= CLASS_ARRAY.length){
// If we run out of items, get the first one instead
slideIndex = 0;
}
$('#slideimg').attr('class',CLASS_ARRAY[slideIndex]);
// Swap out the old class attribute for the next one in our array
$('#slideimg').fadeIn(600),setTimeout('autoAdvance()',2000);
// Set the animation and have it autoadvance if appropriate
});
}
function autoAdvance(){
if(automatic) {
nextSlide();
}
}
$(document).ready(function() {
$('#flatironbtn').click(function(){
automatic = false;
nextSlide();
});
$('#resumebtn').click(function(){
automatic = true;
nextSlide();
});
nextSlide();
});
</script>
Ok. Que faisons-nous ici. J'ai d'abord déplacé le séquençage de vos images de la chaîne d'animation jquery codée en dur dans un tableau. Cela vous aidera à changer facilement l'ordre de votre diaporama, ajouter de nouveaux styles sans recodage, et garder votre code lisible. J'ai également mis un index pour garder une trace de l'endroit où nous sommes dans la liste des classes, et un drapeau qui indique si nous devons avancer automatiquement le spectacle.
var CLASS_ARRAY = ['flatironimg','kaynesimg','chiassoimg'];
var slideIndex = -1;
var automatic = true;
Ensuite, j'ai défini une fonction javascript pour gérer l'animation et charger la diapositive suivante. La fonction est un peu de code réutilisable qui fait une chose. Maintenant, au lieu de chaîner de nombreuses animations à la main, nous écrirons le code pour animer la diapositive une fois et lui demander d'appeler la fonction autoAdvance pour voir si elle devrait continuer.
function nextSlide(){
$('#slideimg').fadeOut(600,function(){
slideIndex ++;
// Get the next highest item
if(slideIndex >= CLASS_ARRAY.length){
// If we run out of items, get the first one instead
slideIndex = 0;
}
$('#slideimg').attr('class',CLASS_ARRAY[slideIndex]);
// Swap out the old class attribute for the next one in our array
$('#slideimg').fadeIn(600),setTimeout('autoAdvance()',2000);
// Set the animation and have it autoadvance if appropriate
});
}
La fonction autoAdvance est très simple. Il vérifie si nous sommes en mode de lecture automatique. Si nous sommes, il charge la diapositive suivante en utilisant la fonction ci-dessus.
function autoAdvance(){
if(automatic) {
nextSlide();
}
}
Enfin, nous avons mis le javascript pour nos boutons pour contrôler le diaporama et le coup d'envoi de la première animation automatiquement:
$(document).ready(function() {
$('#flatironbtn').click(function(){
automatic = false;
// Once the user has clicked, auto-play will turn off
nextSlide();
});
$('#resumebtn').click(function(){
automatic = true;
// Give the user a resume button to pick up where they left off
nextSlide();
});
nextSlide();
});
En outre, grâce à Chinmayee pour nettoyer le format de votre code . Il est toujours utile de montrer clairement aux gens ce que vous essayez de faire en indentant votre code correctement.