jquery - 寻找类似于暴雪的 jQuery 轮播

Question

我正在寻找一个类似于 Blizzard's homepage 上的 jQuery 轮播它居中，即使轮播的内容超出浏览器的宽度，也不会显示水平滚动条，支持图像淡入淡出，并包括分页。

我玩过 SlidesJS 和 carouFredSel，但这些轮播不兼容。经过数小时的测试后，我意识到这是因为这些插件依赖于容器的固定宽度，这导致当轮播比浏览器宽度更宽时出现水平滚动条。

我想知道是否有一个轮播使用类似的代码结构，并通过CSS将图像嵌入到div的背景中:

<div id="carousel">
  <div class="slide">
    <div class="content">Slide01</div>
  </div>
  <div class="slide">
    <div class="content">Slide02</div>
  </div>
  <div class="slide">
    <div class="content">Slide03</div>
  </div>
</div>

.carousel {
  margin: 0 auto;
}

.slide {}

.content {
  background: url(http://www.placehold.it/1200x500 center top no-repeat;
  min-width: 960px;
  height: 500px;
}

Answer 1

首先，暴风雪 slider 是基于 Flash 的。要让它与 jquery 一起工作，你必须执行一个 jquery 函数来触发调整大小以获得窗口宽度:

$(window).resize(function(){
       var w = $(window).width(); 
       $('#sliderContainer').css({width: w});
});