我尝试编写如下内容滑块
脚本
$(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;
}
此代码工作正常,但我希望它与计时器一起使用。我不能做我想做的事。如何使用计时器事件添加自动更改。代码示例或起点。
谢谢。