Question

我想构建最简单的JQuery横幅旋转器。我有两个div想要旋转，所以我这样做了：

$(document).ready(function(){
window.setInterval (changeBanner, 3000);

function changeBanner() {
    $( ".homeBanners").animate({
        left: "-=968"
    }, 1000, function() {

        });
    }
})

我将这些div包装在这样的容器中：

<div class='wrapper'>
    <div class='homeBanners'>
        <div class="homeBanner1">

        </div>
        <div class="homeBanner2">

        </div>
    </div>
</div>

CSS：

.wrapper {
    overflow: hidden;
    width: 968px;
    height: 397px;
}
.homeBanners {
    position: relative;
    width: 1936px;
}
.homeBanner1 {
    float: left;
}
.homeBanner2 {
    float: left;
}

我的问题是。如何“重置”.homeBanner1然后将.homeBanner2“重置”到它的原始位置，这样动画可以无休止地流动？

谢谢。

Answer 1

这是一个简单的jQuery修复工具

$(document).ready(function(){
  window.setInterval (changeBanner, 3000);

  function changeBanner() {
    $( ".homeBanners").animate({
      left: "-=968"
    }, 1000, function() {
      $('.homeBanners > div').last().after($('.homeBanners > div').first());
      $(".homeBanners").attr('style', "left: 0");
    });
  }
});

可以在此处查看演示on JSBin。但是，您可以看到另一个关于 jQuery无限滑块的教程，以获得有关您工作的更多建议。

Answer 2

当我之前这样做时，我复制了第一个元素并将其附加到我的列表末尾。这样，您可以连续向左（或向右）滚动，一旦到达副本，您可以立即切换到原始。它不显示任何视觉变化，但它会让你在列表的开头。一个好的解决方案还应该自动计算幻灯片的数量及其宽度，以便即使您更改它们仍然可以工作。考虑到这一点，我made a fiddle ：

$(document).ready(function () {
    window.setInterval(changeBanner, 3000);

    var $firstBanner = $(".homeBanners > div:first");
    $firstBanner.clone().appendTo(".homeBanners");

    var $banners = $(".homeBanners > div"),
        bannerLength = $banners.length,
        bannerWidth = $firstBanner.width(),
        endPoint = -bannerWidth * (bannerLength - 1);

    function changeBanner() {
        if ($(".homeBanners").css("left") == endPoint + "px") {
            $(".homeBanners").css("left", "0");
        }
        $(".homeBanners").animate({
            left: "-=" + bannerWidth
        }, 1000, function () {});
    }
})

重置JQuery动画横幅中的DIV位置

2 个答案: