Javascript 在幻灯片导航中选择图像幻灯片

我刚刚制作了我的图像滑块，我让它在一个无限循环中左右移动，这很有效。我现在遇到的问题是在幻灯片中选择一个图像，在我的JSFIDLE示例中是一组彩色的小方框，它与幻灯片颜色有关，当您选择顶部的幻灯片时，它应该滑动到所选图像，但此时它没有，有人能帮我完成这项工作吗（在顶部选择幻灯片并将其向左滑动至相关彩色图像）

在你选择了一种颜色后，我的索引有问题。索引应该有一个新的开始索引，因为幻灯片被移到了右边的末尾，但是它们似乎没有改变。如果有人知道如何修复，那么我可以做点什么

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

我已经更新了我的版本，现在它的工作方式应该。

---

我最终能够让它工作，它现在工作得很好。我想做的一个改进是，当你选择顶部的图像幻灯片时，让它只显示下一张幻灯片，并隐藏在所选幻灯片之间有索引的其他幻灯片。如果你能为我做这件事，它看起来会很棒。如果你能，请提前给它。

好的，这是我的建议这就是你怎么做的

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

.集装箱{
高度：400px；
宽度：500px；
溢出：无；
位置：相对位置；
}
.集装箱img{
宽度：400px；
高度：500px；
显示：无；
位置：绝对位置；
顶部：0px；
}
.已选择容器img{
显示：内联块；
}
.container.nextslide{
顶部：0px；
左：500px；
}
...
$（函数（）{
var x=0；
$（“.container img”）.each（函数（）{
$（this.css（“left”，x+“px”）；x+=$（this.width（）；
});
setInterval（函数（）{
当前变量=$（“容器img.selected”）；
var next=current.next（）；
next.addClass（“nextslide”）；
$（下一步）.animate（{“left”：“0px”}，500，function（）{
next.addClass（“选定”）；
});
$（当前）.animate（{“left”：“-“+current.width（）+px”}，500，function（）{
当前.removeClass（“选定”）；
});
}, 1000);
});

---

我想这会给你一个创建幻灯片的好主意。

谢谢分享你的代码。我最终能够让它工作，现在它工作得很好。我想做的一个改进是，当你选择顶部的图像幻灯片时，让它只显示下一张幻灯片，并隐藏其他有索引的幻灯片在所选幻灯片之间，如果你能为我这样做，它将看起来很棒。如果你能，请提前给它。