試圖讓我的imageslider工作

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

幫助我歐比旺·克諾比你我唯一的希望！

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（一點點refoctoring），我們將有：

// 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); 

    }); 
}