Question

我有一个图像滑块，显示我在MVC5视图中的所有图像，但当我到达最后一个时，我不知道如何让它跳回到第一个并从那里继续。

事情的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!
   }
  }

帮助我Obiwan Kenobi你唯一的希望！

Answer 1

做吧：）

<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>

在我们的JS（稍微重新整理）中，我们将：

 // we need this support principle don't repeat yourself (DRY)
function avoidSrcSymbols(src){
    return src.replace("../..", " ").src1.replace('\\', "/");
}

// This function need to improve set image via class in future//
function changeImage($src, imageSrc){  
    $src.css("background-image", 'url("' + imageSrc + '")');
}

function startFunction() {
  $(window).load(function () {
    var $firstLi = $("#image_slider").find('li:first-child');
        $firstLi.addClass("start");
    var src = $firstLi.find('img').attr('src');
        src = avoidSrcSymbols(src);
        changeImage($(".container2"), src);
    //fadeInandOut();
  });
}

function nextLi($currentLi){
    if ($currentLi.is(":last-child")) {
        // here is many method to get  firstChild from current
        return $currentLi.parent().first(); 
    }
    return $currentLi.next("li");
}

function prevLi($currentLi){
    if ($currentLi.is(":first-child")) {
        // here is many method to get  lastChild from current
        return $currentLi.parent().last(); 
    }
    return $currentLi.prev("li");
}

function nextImageFunction() {
    $("#next").click(function () {
       var $currentLy = $("li.start");
          nextLi($currentLy).addClass("start");
          $currentLy.removeClass("start");

       var src = $currentLy.find("img").attr('src');
          src = avoidSrcSymbols(src);
          changeImage($(".container2"), src);
    });
}

function previousImageFunction() {
    $("#prev").click(function () {

      var $currentLy = $("li.start");
          prevLi($currentLy).addClass("start");
          $currentLy.removeClass("start"); // remove Class from currect li

      var src = $currentLy.find("img").attr('src');
          src = avoidSrcSymbols(src);
          changeImage($(".container2"), src);

    });
 }

试图让我的imageslider工作

1 个答案: