javascript - jquery 中的无限水平图像库

Question

我正在尝试做无限水平图像画廊，但无法解决一些问题。我有一个具有 100% 宽度的 div 和第二个 div 内部具有非常大的宽度，因此图像可以彼此相邻。我正处于测试阶段所以函数在页面加载后立即运行，因此图库向左移动第一个图像宽度的边距，然后必须将其作为最后一个子附加，它看起来像这样工作，但在第一次附加它与另一个图像一起发生之后。我怎样才能避免它？我的第二个问题是当我想在悬停时移动，例如在某个箭头上移动，只要我超过那个，我怎样才能正确地循环这个函数？非常感谢。

这是fiddle.

HTML

<div id="slider">
    <div id="slide-container">
        <div class="slide" id="slide"><img src="clique.jpg"></div>
        <div class="slide"><img src="rollyx.jpg"></div>
        <div class="slide"><img src="grafrollyx.jpg"></div>
        <div class="slide"><img src="grafagent.jpg"></div>
        <div class="slide"><img src="grafrollyx.jpg"></div>                            
    </div>
</div>

JavaScript

function slider(){
    var what = $('#slide').width();


    $('.slide').first().animate({marginLeft: -(what)}, 0, setTimeout(function() {
        $('.slide')
            .first()
            .appendTo($('.slide').parent())
            .css({ marginLeft: 0 });
    }, 1000))
}

Answer 1

我想这是一个更好的方法

这是一个FIDDLE画廊。

1. 将所有图像放入隐藏的 div 中

2. 克隆它们并将它们放入可见的 div 中

3. 通过更改左边距来为图像添加动画

4. 您可以通过设置间隔功能调整图像之间的时间

5. 您可以通过动画时间来调整滑入时间。

JS

var pictxtnumber = 1;
loadpictxt(pictxtnumber);

var fadeintime = 500;
animatediv();

function animatediv()
{
    var number = 0;
    var interval = setInterval(function() { 
                                           pictxtnumber = pictxtnumber + 1;
                                           if(pictxtnumber > 6)
                                             {
                                              pictxtnumber = 1;
                                              }
                                           loadpictxt(pictxtnumber);

                                           }, 1000);
}

function loadpictxt(num)
{
  $('.picturediv').html('');
  $(".hiddenimage img:nth-child(" + num + ") ").clone().appendTo('.picturediv');
  $('.picturediv img').css('margin-left', '100px');
  $('.picturediv img').animate({marginLeft: "0"}, 100);    
}