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。我最终能够让它工作，现在它的工作非常好。我希望todo的一个改进是让它只显示下一张幻灯片，当您选择顶部的图像幻灯片并隐藏其他在所选幻灯片之间有索引的内容如果您可以为我这样做它看起来很棒如果可以，请在此之前发表。

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>

我认为这应该让你有一个很好的想法来创建滑动图像。

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

1 个答案: