下一個和以前不按鍵自動在幻燈片放映工作

Question

<div class="btn-bar"> 
     <div id="buttons"> 
      <p>by Marina</p> 
      <a id="prev" href="#">&lt;</a> 
      <a id="next" href="#">&gt;</a> 
     </div> 
    </div> 
    <p><span id="original">High Life art party Neutra before they</span></p> 
</section> 

JQ：

$("document").ready(function() { 
    var texts = ["High Life art party Neutra before they", "second"]; 
    var i = 400; 
    (function runIt() { 
     i++; 
     $('#original').fadeOut('slow', function(){ 
      $('#original').html(texts[i % texts.length]); 
      $('#original').fadeIn('slow', function(){ 
       runIt() 
      }); 
     }); 
    }()); 
}); 

Answer 1

TNX的幫助！我找到解決方案！ HTML：

<div id="container"> 
    <ul id="slider"> 
     <li class="slide selected"><img src="img/icon-teacher.png">Meh ennui knausgaard skateboard forage, health goth flexitarian.</li> 
     <li class="slide"><img src="img/more.png"> Four dollar toast helvetica before they sold out,<br> typewriter deep v locavore tattooed pug organic umami kombucha bushwick listicle sustainable. </li> 
     <li class="slide"><img src="img/museum.png">Echo park mustache dreamcatcher, leggings austin sustainable organic locavore beard pour-over sartorial.</li> 
     <li class="slide"><img src="img/cat.jpg"> Pinterest irony migas, squid paleo mixtape everyday carry neutra drinking vinegar.</li> 
    </ul> 
    <p id="mar">by Marina</p> 
    <div class="btn-bar"> 

     <button id="prev">&lt;</button> 
     <button id="next">&gt;</button> 
     <div style="clear:both"></div> 
    </div> 
</div> 

JQ：

// Have the first and last li's set to a variable 
var $first = $('.slide:first', '#slider'), 
    $last = $('.slide:last', '#slider'); 

$("#next").click(function() { 
    var $next, 
      $selected = $(".selected"); 
    // get the selected item 
    // If next li is empty , get the first 
    $next = $selected.next('.slide').length ? $selected.next('.slide') : $first; 
    $selected.removeClass("selected").fadeOut('fast'); 
    $next.addClass('selected').fadeIn('fast'); 
}); 
$("#prev").click(function() { 
    var $prev, 
      $selected = $(".selected"); 
    // get the selected item 
    // If prev li is empty , get the last 
    $prev = $selected.prev('.slide').length ? $selected.prev('li') : $last; 
    $selected.removeClass("selected").fadeOut('fast'); 
    $prev.addClass('selected').fadeIn('fast'); 
}); 
var time = 5000; 
var tid = setTimeout(timer, time); 

function timer() { 
    var $next, 
      $selected = $(".selected"); 
    // get the selected item 
    // If next li is empty , get the first 
    $next = $selected.next('.slide').length ? $selected.next('.slide') : $first; 
    $selected.removeClass("selected").fadeOut('fast'); 
    $next.addClass('selected').fadeIn('fast'); 

    tid = setTimeout(timer, time); // repeat myself 
} 
function abortTimer() { // to be called when you want to stop the timer 
    clearTimeout(tid); 
}