Diaporama automatique simple dans jQuery

Question

J'ai un simple diaporama qui fonctionne bien jusqu'à présent. il se compose d'un pager et des images à afficher. les deux sont une liste non ordonnée:

<ul id="keyvisualpager"> 
    <li><a><span>Show Keyvisual 1</span></a></li> 
    <li><a><span>Show Keyvisual 2</span></a></li> 
    <li><a><span>Show Keyvisual 3</span></a></li>    
</ul> 

<ul id="keyvisualslides"> 
    <li><img src="index_files/mbr_keyvisual1.jpg" alt="Keyvisual" /></li> 
    <li><img src="index_files/mbr_keyvisual2.jpg" alt="Keyvisual" /></li> 
    <li><img src="index_files/mbr_keyvisual3.jpg" alt="Keyvisual" /></li> 
</ul> 

L'selon le code jQuery est:

$('#keyvisualpager li a').click(function() { 

    // get position of a element 
    var mbr_index = $(this).parent().prevAll().length; 
    var mbr_targetkeyvisual = mbr_index + 1; 

    // hide current image and show the target image 
    $('#keyvisualslides li:visible').hide();   
    $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show() 

    // remove active class from current indicator and add the same class to target indicator 
    $('#keyvisualpager li a').removeClass('keyvisualactive'); 
    $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive'); 

}); 

initialement toutes les images sont mises à display: none; ... en cliquant sur un lien dans #keyvisualpager, l'image correspondante est affichée. en même temps, l'indicateur change en conséquence.

maintenant, mon problème:

en dehors de ce mode de navigation dans les images i besoin diaporama entier pour faire avancer automatiquement. Comment puis-je parvenir:

a) l'image suivante est présentée permet après 5 secondes et dire

b) la classe « .keyvisualactive » est ajouté au suivant un élément #keyvisualpager

Note : malheureusement, je dois utiliser jquery 1.2.1, la mise à jour n'est pas une option.

Merci pour votre aide les gars

EDIT

je suis maintenant en utilisant ce code. ça marche presque. mais après que la dernière image de l'ensemble est affichée: comment puis-je lui dire de recommencer avec la première image? Merci!

var reload = setInterval(function(){ 
    // get position of a element 
    var mbr_index = $('#keyvisualpager li .keyvisualactive').parent().prevAll().length; 
    var mbr_targetkeyvisual = mbr_index + 2; 
    // alert(mbr_index+'//'+mbr_targetkeyvisual) 

    // hide current image and show the target image 
    $('#keyvisualslides li:visible').hide();   
    $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show(); 

    // remove active class from current indicator and add the same class to target indicator 
    $('#keyvisualpager li a').removeClass('keyvisualactive'); 
    $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive'); 

}, 2000); 

Answer 1

Vous pouvez utiliser la méthode setInterval() de JavaScript pour y parvenir.

var reload = setInterval(function(){ 
      // do something 
}, 5000); 

Le nombre est la longueur de chaque pause en millisecondes.

Pour arrêter le diaporama, par exemple lorsqu'un utilisateur sélectionne une image, vous pouvez utiliser la méthode clearInterval().

EDIT

Essayez quelque chose comme ceci:

$('#keyvisualpager li a').click(function() { 

    var reload = setInterval(function(){ 

     // get position of a element 
     var mbr_index = $(this).parent().prevAll().length; 
     var mbr_targetkeyvisual = mbr_index + 1; 

     // hide current image and show the target image 
     $('#keyvisualslides li:visible').hide();   
     $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show() 

     // remove active class from current indicator and add the same class to target indicator 
     $('#keyvisualpager li a').removeClass('keyvisualactive'); 
     $('#keyvisualpager li:nth-child('+mbr_targetkeyvisual+') a').addClass('keyvisualactive'); 

    }, 5000); 

    $('#pagerstop').click(function(){ 
     clearInterval(reload); 
    } 

}); 

EDIT 2

Vous devez garder une trace de comptage d'image et l'index que vous êtes à (si je comprends bien vous l'avez dans votre var mbr_targetkeyvisual?) il devrait donc fonctionner comme ceci (non testé):

// Image count 
var content_length = $('#keyvisualslides').children().length; 

var automate = setInterval(function(){ 
    if(index < content_length){ 
     $('#keyvisualslides li:visible').hide();   
     $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show(); 
     mbr_targetkeyvisual++; 
    } 
    else{ 
     mbr_targetkeyvisual = 0; 
     $('#keyvisualslides li:visible').hide(); 
     $('#keyvisualslides li:nth-child('+mbr_targetkeyvisual+')').show(); 
     mbr_targetkeyvisual++; 
    } 
}, 5000); 

Answer 2

comment faire cela soit automatisé, ou nous pouvons ajouter la navigation suivante et précédente

$(function(){ 
 
    $('.slide-thumb .thumb').on("mouseenter",function(){ 
 
     var dataImage = $(this).data('image'); 
 
     $('.slide-jumbo .jumbo:visible').fadeOut(1000,function(){ 
 
     $('.slide-jumbo .jumbo[data-image="'+dataImage+'"]').fadeIn(500); 
 
     }); 
 
    }); 
 
});

* { 
 
     font-family: Arial; 
 
    } 
 
    .slide-container { 
 
     /*border: solid 1px;*/ 
 
     width: 500px; 
 
     height: 360px; 
 
    } 
 
    .slide-jumbo { 
 
     /*border: solid 1px;*/ 
 
     width: 500px; 
 
     height: 300px; 
 
     overflow: hidden; 
 
    } 
 
    .jumbo { 
 
     position: relative; 
 
     display: inline-block; 
 
     width: 500px; 
 
     height: 300px; 
 
     float: left; 
 
    } 
 
    .jumbo img, .thumb img { 
 
     position: absolute; 
 
     left: 0; 
 
    } 
 
    .jumbo img { 
 
     top: 0; 
 
    } 
 
    .thumb img { 
 
     bottom: 0; 
 
    } 
 
    .jumbo-capt, .thumb-capt { 
 
     width: 100%; 
 
     background-color: rgba(0,0,0,0.8); 
 
     position: absolute; 
 
     color: #fff; 
 
     z-index: 100; 
 
     /* -webkit-transition: all 300ms ease-out; 
 
     -moz-transition: all 300ms ease-out; 
 
     -o-transition: all 300ms ease-out; 
 
     -ms-transition: all 300ms ease-out; 
 
     transition: all 300ms ease-out; */ 
 
     left: 0; 
 
     bottom: 0; 
 
    } 
 
    .slide-thumb { 
 
     /*border: solid 1px;*/ 
 
     width: 500px; 
 
     height: 60px; 
 
     overflow: hidden; 
 
    } 
 
    .thumb { 
 
     position: relative; 
 
     /*border: solid 1px;*/ 
 
     display: inline-block; 
 
     width: 100px; 
 
     height: 60px; 
 
     overflow: hidden; 
 
     float: left; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div class="slide-container"> 
 
    <div class="slide-jumbo"> 
 
     <div class="jumbo" data-image="1"> 
 
      <img src="images/2.png"> 
 
      <div class="jumbo-capt"> 
 
       <h3>Title 1</h3> 
 
       <p>Summary 1</p> 
 
      </div> 
 
     </div> 
 
     <div class="jumbo" data-image="2"> 
 
      <img src="images/3.png"> 
 
      <div class="jumbo-capt"> 
 
       <h3>Title 2</h3> 
 
       <p>Summary 2</p> 
 
      </div> 
 
     </div> 
 
     <div class="jumbo" data-image="3"> 
 
      <img src="images/9.png"> 
 
      <div class="jumbo-capt"> 
 
       <h3>Title 3</h3> 
 
       <p>Summary 3</p> 
 
      </div> 
 
     </div> 
 
     <div class="jumbo" data-image="4"> 
 
      <img src="images/7.png"> 
 
      <div class="jumbo-capt"> 
 
       <h3>Title 4</h3> 
 
       <p>Summary 4</p> 
 
      </div> 
 
     </div> 
 
     <div class="jumbo" data-image="5"> 
 
      <img src="images/9.png"> 
 
      <div class="jumbo-capt"> 
 
       <h3>Title 5</h3> 
 
       <p>Summary 5</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="slide-thumb"> 
 
     <div class="thumb" data-image="1"> 
 
      <img src="images/2small.png"> 
 
      <div class="thumb-capt"> 
 
       <p> 
 
        <strong> 
 
         Title 1 
 
        </strong> 
 
       </p> 
 
      </div> 
 
     </div> 
 
     <div class="thumb" data-image="2"> 
 
      <img src="images/3small.png"> 
 
      <div class="thumb-capt"> 
 
       <p> 
 
        <strong> 
 
         Title 2 
 
        </strong> 
 
       </p> 
 
      </div> 
 
     </div> 
 
     <div class="thumb" data-image="3"> 
 
      <img src="images/9small.png"> 
 
      <div class="thumb-capt"> 
 
       <p> 
 
        <strong> 
 
         Title 3 
 
        </strong> 
 
       </p> 
 
      </div> 
 
     </div> 
 
     <div class="thumb" data-image="4"> 
 
      <img src="images/7small.png"> 
 
      <div class="thumb-capt"> 
 
       <p> 
 
        <strong> 
 
         Title 4 
 
        </strong> 
 
       </p> 
 
      </div> 
 
     </div> 
 
     <div class="thumb" data-image="5"> 
 
      <img src="images/9small.png"> 
 
      <div class="thumb-capt"> 
 
       <p> 
 
        <strong> 
 
         Title 5 
 
        </strong> 
 
       </p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>