在幻燈片導航中選擇圖像幻燈片

Question

我剛剛製作了圖像滑塊，並在無限循環中爲左右動畫製作了動畫。我現在遇到的麻煩是在幻燈片中選擇一張圖片，在我的jsFiddle示例中是一組彩色的小盒子，當您在頂部選擇一張幻燈片時，它與幻燈片顏色相關，應該滑動到所選圖像，但是在這一點上，它不會，有人能夠幫助我做到這一點（選擇頂部的幻燈片，並將其向左滑動到相關的彩色圖像）jsFiddle here

我有索引問題後，你有選擇了一種顏色，索引應該有一個新的起始索引，因爲幻燈片被轉移到了最後的右邊，但如果有人知道如何解決這個問題，那麼他們似乎沒有改變，那麼我可以到某個地方。

的jQuery：

$('.stages li a').on('click', function(e) { 
    var slide = $('#' + $(this).data('slide')); 
    $('.stages li').removeClass('selected'); 
    $(this).parent().addClass('selected'); 
    goto_slide(slide);   
}); 


function goto_slide(slide) { 
    var index = $(slide).index(); 

    var count = index; 

    $('.slides ul').animate({'margin-left': '-=' + (item_width * (count - 1))}, 500, function() { 
     $('.slides ul li').slice(0, count - 1).each(function() { 
      $('.slides ul li:first').after($('.slides ul li:last'));       
     })     
    }); 

    $('#index').text(index); 
} 

我已經更新我的版本，它的工作現在它應該jsFiddle的方式。 我能夠最終得到它的工作，現在它工作得非常甜蜜。我想要得到的一個改進就是讓它只顯示下一張幻燈片，當您選擇頂部的圖像幻燈片並隱藏其他在所選幻燈片之間有索引的其他幻燈片時，如果您可以爲我做到這一點，它會看起來很棒如果可以的話，先給它。

Answer 1

好吧，這是你如何做到的。

第1步：創建一個容器div併爲其設置特定的高度和寬度。像下面

<style> 

.container{ 
    height:400px; 
    width:500px; 
    overflow:none; 
    position : relative; 
} 

.container img{ 
    width : 400px; 
    height : 500px; 
    display:none; 
    position : absolute; 
    top : 0px; 
} 

.container img.selected{ 
    display : inline-block; 
} 

.container .nextslide{ 
    top : 0px; 
    left : 500px; 
} 

</style> 

<div class="container"> 
    <img ... class="selected"/> 
    <img ... class=""/> 
    <img ... class=""/> 
    <img ... class=""/> 
    ... 
</div> 

<script> 
$(function(){ 
    var x=0; 
    $(".container img").each(function(){ 
     $(this).css("left", x + "px"); x+=$(this).width(); 
    }); 

    window.setInterval(function(){ 
     var current = $("container img.selected"); 
     var next = current.next(); 
     next.addClass("nextslide); 
     $(next).animate({ "left" : "0px"}, 500, function(){ 
      next.addClass("selected"); 
     }); 

     $(current).animate({ "left" : "-" + current.width() + "px"}, 500, function(){ 
      current.removeClass("selected"); 
     }); 
    }, 1000); 
}); 
</script> 

我認爲這應該給你創造滑動圖像相當好的主意。