JQuery内容滑块？

Question

我尝试写一个内容滑块像下面

SCRIPT

$(document).ready(function() { 
    $(".nav_button:first").addClass("nav_button_active"); 
    $(".nav_button").click(function() { 
     $(".content_wrapper .content:nth-child(" + $(this).text() + ")").show().siblings().hide(); 
     $(this).addClass("nav_button_active").siblings().removeClass("nav_button_active"); 
    }); 
}); 

HTML

<div class="main_slider"> 
    <div class="content_wrapper"> 
     @foreach (var item in Model) 
     { 
      <div class="content"> 
       <img src="~/@item.BigImageUrl" alt="@item.Description" width="600" height="300" /> 
      </div> 
     } 
    </div> 
    <div class="nav_bar"> 
     @for (int i = 1; i <= Model.Count(); i++) 
     { 
      <div class="nav_button">@i</div> 
     } 
    </div> 
</div> 

CSS

.content_wrapper { 
    height: 300px; 
} 

.content { 
    display: none; 
} 

    .content:first-child { 
     display: block; 
    } 

.nav_bar { 
    height: 30px; 
    background-image:url(Content/images/gradient2.png); 
} 

.nav_button { 
    float: left; 
    height: 30px; 
    width: 38px; 
    line-height:30px; 
    text-align:center; 
    border-right:2px groove #fff; 
    cursor:pointer; 
    font-weight:bold; 
} 

.nav_button_active{ 
    background-color:#0026ff; 
    color:#fff; 
} 

此代码工作正常，但我想这个工作与计时器。我无法做我想做的事。如何使用计时器事件添加自动更改。代码示例或起点。

谢谢。

Answer 1

我解决它像下面，但我不知道这是最好的方法。

$(document).ready(function() { 
    var count = '@Model.Count()'; 
    var i = 1; 
    window.setInterval(yourfunction, 1000); 

    function yourfunction() { 
     $(".content_wrapper .content:nth-child(" + i + ")").show().siblings().hide(); 
     $(".nav_button:nth-child(" + i + ")").addClass("nav_button_active").siblings().removeClass("nav_button_active"); 
     i++; 
     if (i > count) { 
      i = 1; 
     } 
    } 

    $(".nav_button:first").addClass("nav_button_active"); 
    $(".nav_button").click(function() { 
     $(".content_wrapper .content:nth-child(" + $(this).text() + ")").show().siblings().hide(); 
     $(this).addClass("nav_button_active").siblings().removeClass("nav_button_active"); 
     i = $(this).text(); 
    }); 
}); 

Answer 2

如果我理解不错，你可以使用：

var currentElemnt = $(".content").first(); 
//do something 
window.setTimeout(function(){ 
    currentElement = currentElement.next(); 
    //do something 
},5000); 

这是5000毫秒超时。