0
我有一个形象的滑块,显示所有我在我的观点中MVC5图像但是当我到达最后一个我不知道如何使它跳回第一个和继续那里。试图让我的imageslider工作
的HTML中的东西看起来是这样的:
<div class="container2">
<div class="slider_wrapper">
<ul id="image_slider">
<li> <img src="@Model.ImagePath.Replace(Request.ServerVariables["APPL_PHYSICAL_PATH"],"../../")" width=50 height=50 /> </li>
@foreach (var item in Model.ImageGallarys)
{
<li> <img src="@item.ImagePath.Replace(Request.ServerVariables["APPL_PHYSICAL_PATH"],"../../")" width=50 height=50 /></li>
}
</ul>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>
</div>
和JavaScript看起来像这样:
function startFunction() {
$(window).load(function() {
var src = $("#image_slider").find('li:first-child img').attr('src');
$("#image_slider li:first-child ").addClass("start");
var src1 = src.replace("../..", " ");
var src2 = src1.replace('\\', "/");
$(".container2").css("background-image", 'url("' + src2 + '")');
//fadeInandOut();
});
}
function nextImageFunction() {
$("#next").click(function() {
$("li.start").next("li").addClass("start");
$("li.start").prev("li").removeClass();
var srcNext = $("li.start img").attr('src');
var srcNext1 = srcNext.replace("../..", " ");
var srcNext2 = srcNext1.replace('\\', "/");
$(".container2").css("background-image", 'url("' + srcNext2 + '")');
if($("li.start").is(":last-child"))
{
//I want the solution for this one!
}
});
}
function previousImageFunction() {
$("#prev").click(function() {
$("li.start").prev("li").addClass("start");
$("li.start").next("li").removeClass();
var srcNext = $("li.start img").attr('src');
var srcNext1 = srcNext.replace("../..", " ");
var srcNext2 = srcNext1.replace('\\', "/");
$(".container2").css("background-image", 'url("' + srcNext2 + '")');
});
if ($("li.start").is(":first-child")) {
//And also for this one!
}
}
帮助我欧比旺·克诺比你我唯一的希望!