有沒有辦法讓這個幻燈片自動移動？

Question

我使用我滑塊（即我讓我自己），它..但通過點擊每個標籤

數量的工作，我想要做它經過的每個圖像自動每次5秒鐘或任何..

這是HTML和JavaScript代碼：

HTML：

<div class="slide2"> 
    <div id="tabs"> 
     <div id="content"> 
      <div id="slide-6" class="tab-slide" style="display: block"> 
     <div class="desc"> 
      <div>Slide 6 - tab1</div> 
     </div> 
      </div> 

      <div id="slide-7" class="tab-slide"> 
     <div class="desc" style="width:320px;padding-top:236px;height:120px;"> 
      <h1>Slide 7 - tab2</h1> 
     </div> 
      </div> 

      <div id="slide-8" class="tab-slide"> 
     <div class="desc" style="width:320px;"> 
      <h1>Slide 8 - tab3</h1> 
     </div> 
      </div> 

      <div id="slide-9" class="tab-slide"> 
     <div class="desc" style="width:320px;"> 
      <h1>Slide 9 - tab4</h1> 
     </div> 
      </div> 
     </div> 
<ul id="nav2"> 
    <li><a class="current" id="tab-6" href="#tab">Tab1</a></li> 
    <li><a id="tab-7" href="#tab">Tab2</a></li> 
    <li><a id="tab-8" href="#tab">Tab3</a></li> 
    <li><a id="tab-9" href="#tab">Tab4</a></li> 
</ul> 
    </div> 

的javascrip T：

 $(function(){ 

     $('#tabs #nav2 li a').click(function(){ 

      var currentNum = $(this).attr('id').slice(-1); 
      $('#tabs #nav2 li a').removeClass('current'); 
      $(this).addClass('current'); 

      $('#tabs #content .tab-slide').hide(1); 
      $('#tabs #content #slide-'+currentNum+'.tab-slide').show(300); 
     }); 

     $('#tabsSlide #nav2 li a').click(function(){ 

      var currentNum = $(this).attr('id').slice(-1); 
      $('#tabsSlide #nav2 li a').removeClass('current'); 
      $(this).addClass('current'); 

      $('#tabsSlide #content .tab-slide').slideUp(300); 
      $('#tabsSlide #content #slide-'+currentNum+'.tab-slide').slideDown(300); 
     }); 

    }); 

CSS：

.slide2 { 
    margin:0 auto; 
    padding:0; 
    width:574px; 
} 
#tabs { 
    width:574px; 
    margin:0 auto; 
    padding:0; 
} 
#tabs #nav2 { 
    float: right; 
    margin:0; 
    padding:0px; 
    list-style-type:none; 
    width:574px; 
} 
#tabs #nav2 li{ 
    display:inline; 
} 
#tabs #nav2 li a { 
    display:block; 
    width:25%; 
    text-align:center; 
    float:right; 
    padding:0; 
    margin:0; 
    height:55px; 
    line-height:55px; 
    color:#0096d6; 
    text-decoration:none; 
    font-family:Tahoma; 
    font-size:12px; 
    font-weight:bold; 
    background-image: url('images/slide/a.png'); 
} 
#tabs #nav2 li a:hover { 
    background:#dddede; 
} 
#tabs #nav2 li a.current { 
    background:#dddede; 
    color:#666666; 
} 
#tabs #content { 
    padding:0px; 
    clear: both; 
    text-align: right; 
    min-height: 366px; 
} 
#tabs #content ul { 
    list-style-type:none; 
    color:#c1c0c0; 
} 
.tab-list { 
    width:115px; 
    float:right; 
    line-height:200%; 
    margin:0px 10px 0px 0px; 
    padding:0px 0px 0px 0px; 
    color:#c1c0c0; 
} 
.tab-list a { 
    color:#c1c0c0; 
} 
.tab-list a:hover { 
    color:#0198d8; 
} 
#tabs #content .tab-slide { display: none; } 
#tabs #content .tab-slide p { 
    margin:0; 
    padding: 0; 
    font: 11px tahoma; 
    line-height: 150%; 
} 
.slide2 #slide-6 { 
    background-image: url('images/slide/1.jpg'); 
    width:574px; 
    height:366px; 
} 
.slide2 #slide-7 { 
    background-image: url('images/slide/2.jpg'); 
    width:574px; 
    height:366px; 
} 
.slide2 #slide-8 { 
    background-image: url('images/slide/3.jpg'); 
    width:574px; 
    height:366px; 
} 
.slide2 #slide-9 { 
    background-image: url('images/slide/4.jpg'); 
    width:574px; 
    height:366px; 
} 

謝謝！

---

，我不需要鼠標懸停暫停..

我只是想自動進行內容舉動，這一切！

Answer 1

這應該爲你循環（每隔5秒）...沒有你所有的代碼，並添加鉤子，這似乎是最簡單的方法。除非您添加該功能，否則它不會像許多滑塊一樣在鼠標懸停時暫停循環定時器。

var to; 
function cycle() { 
    $('#tabsSlide #nav2 li a').click(); 
    to = setTimeout(cycle,5000); 
} 
cycle(); 

注意，添加暫停的效果，你需要停止/通過清除鼠標懸停在超時和恢復鼠標移開時重新啓動超時通話。如果你想恢復定時器而不是重新啓動它，你需要做一些數學來做到這一點。