3

我刚刚制作了我的图像滑块，我让它在无限循环中左右动画，这很有效。我现在遇到的麻烦是在幻灯片中选择一个图像，在我的 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。我最终能够让它工作，现在它工作得非常好。我想做的一个改进是让它在您选择顶部的图像幻灯片时仅显示下一张幻灯片，并隐藏在所选幻灯片之间有索引的其他幻灯片，如果您可以为我这样做，它会看起来很棒如果可以的话，先给它。

4

1 回答 1

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>

我认为这应该给你一个相当好的想法来创建滑动图像。

于 2013-03-11T06:51:30.307 回答