0

我想构建最简单的 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 到它的原始位置，所以动画可以无休止地流动？

谢谢你。

4

2 回答 2

2

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

$(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 () {});
    }
})
于 2013-08-15T15:38:55.187 回答
2

这是您的 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");
    });
  }
});

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

于 2013-08-15T15:36:59.403 回答