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。

将所有图片放入隐藏的div
克隆它们并将它们放入可见的div
通过更改左边距
您可以通过设置间隔功能
您可以按动画时间调整幻灯片时间。

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

jquery中的无限水平图库

1 个答案: