JQuery 内容滑块？答案

【问题标题】：JQuery Content slider?JQuery 内容滑块？
【发布时间】：2013-01-08 20:58:36
【问题描述】：

我尝试编写如下内容滑块

脚本

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

此代码工作正常，但我希望它与计时器一起使用。我不能做我想做的事。如何使用计时器事件添加自动更改。代码示例或起点。

谢谢。

【问题讨论】：

标签： jquery asp.net-mvc slider

【解决方案1】：

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

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

这是 5000 毫秒的超时。

【讨论】：

谢谢，但我不能使用你的代码。可能我无法解释这个问题。

【解决方案2】：

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

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

【讨论】：