jQuery中的无限水平图像库

Question

我试图做无限的水平图像画廊，但无法解决一些问题。我得到了一个宽度为100％的div，第二个div内部的宽度非常大，因此图像可以彼此相邻。我处于测试阶段，因此功能是页面加载后立即运行，因此图库向左移动宽度为第一张图像的边距，然后必须将其作为最后一个孩子附加，其外观看起来像是正常工作，但在第一次将其发生的情况附加到另一个图像之后。避免它吗？我的第二个问题是，当我想在某个箭头上进行悬停时，只要我在那上面，我如何正确地循环此功能？非常感谢。

这是小提琴。

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

我认为这是一种更好的方法

这是画廊的一块地 。

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