簡單的自動幻燈片在jQuery

Question

我有一個簡單的幻燈片，目前工作還行。它由一個尋呼機和要顯示的圖像組成。兩者都是一個無序列表：

<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> 

的根據jQuery代碼是：

$('#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'); 

}); 

最初所有圖像被設定爲顯示：無; ... upcon點擊#keyvisualpager中的鏈接，然後顯示相應的圖像。同時指標也會相應變化。

現在，我的問題：

除了通過圖像導航的這種模式，我需要整個幻燈片自動前進。我怎樣才能做到這一點：

A）之後被顯示的下一個圖像可以說5秒鐘，並

b）該類別「.keyvisualactive」被添加到所述的元件在#keyvisualpager

音符：不幸的是我必須使用jQuery 1.2.1，更新不是一個選項。

感謝您的幫助球員

編輯

我現在用這個代碼。它幾乎可以工作。但在顯示集合中的最後一張圖片後：我如何告訴它重新開始第一張圖片？謝謝！

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

您可以使用JavaScript的setInterval（）方法來實現此目的。

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

該數字是以毫秒爲單位的每個暫停的長度。

要停止幻燈片顯示，例如，當用戶選擇圖像時，可以使用clearInterval（）方法。

編輯

嘗試這樣：

$('#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

你要跟蹤的圖像數量和你在（如果我理解正確的索引你有這個在你的var mbr_targetkeyvisual？），所以它應該像這樣工作（未測試）：

// 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

如何使這個自動化，或者我們可以添加一個導航和prev

$(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>