1

我正在尝试构建一个类似于此处演示的“滑块” http://ui.jquery.com/repository/real-world/product-slider/<li>但我正在尝试在列表项（ ）中使用内部 div . <p>如果您不使用图像或块元素（ ，<div>等），似乎此演示会中断

有人对此有任何快速解决方案吗？我基本上想在 a 中使用文本和可能的图像，<div>而不是使用图像。

我确实找到了 jCarousel，它看起来好像可以工作，但我正在寻找更轻量级的东西？有任何想法吗？

4

2 回答 2

2

我想我有一个你正在尝试做的工作示例，但有几个问题。

使用您发布的示例作为基础，您可以将 UL 中 LI 的 HTML 标记替换为容器 DIV 中的 DIV。例如：

        <div class="sliderGallery">
          <div class="div-that-gets-cropped">
            <div class="text-and-images-chunk">Some text!<br /><img class="pb-airportexpress" src="slider-gallery_files/pb_airport_express.jpg" /></div>
            <div class="text-and-images-chunk">Some text!<br /><img src="slider-gallery_files/pb_airport_extreme.jpg" /></div>
            <div class="text-and-images-chunk">Some text!<br /><img src="slider-gallery_files/pb_timecapsule_20080115.jpg" /></div>
            ...
          </div>

然后修改页面中的 jQuery 代码以针对该容器 DIV 而不是 UL：

   window.onload = function () {
        var container = $('div.sliderGallery');
        var divThatGetsCropped = $('div.div-that-gets-cropped', container);
        var itemsWidth = divThatGetsCropped.innerWidth() - container.outerWidth();
        $('.slider', container).slider({
            minValue: 0,
            maxValue: itemsWidth,
            handle: '.handle',
            stop: function (event, ui) {
                divThatGetsCropped.animate({'left' : ui.value * -1}, 500);
            },
            slide: function (event, ui) {
                divThatGetsCropped.css('left', ui.value * -1);
            }
        });
    };

然后，您需要进行一些重要的 CSS 更改...最初的示例依赖于 LI 的样式以显示：内联，在隐藏溢出的容器内部。如果您只是将这些“text-and-images-chunk” DIV 设置为内联显示，那么尝试让所有内容正确显示将是一件令人头疼的事情。您可能希望将它们全部浮动。

但是，浮动元素不会很好地与容器“div-that-gets-cropped”DIV 配合使用，因为它被“sliderGallery”DIV“显示”的方式（至少这是我在 Firefox 3.03 中所经历的） ）。我通过为“div-that-gets-cropped”DIV（10000 px）设置一个非常大的宽度来解决这个问题：

        .sliderGallery div.div-that-gets-cropped {
          position: absolute;
          list-style: none;
          overflow: none;
      white-space: nowrap;
      padding: 0;
          margin: 0;
          width: 10000px;
        }

        .sliderGallery div.div-that-gets-cropped div.text-and-images-chunk {
      float: left;
      margin-right: 24px;
        }

而且您必须调整 .slider-lbl1, .slider-lbl2 的“左”值以匹配最终的宽度（如果文本的大小最终改变了“文本和图像块”元素）。

我注意到的一个问题是，当您将图像放在块级元素中时，没有一种好方法可以让它们“拥抱”底部，就像在使用内联的示例中所做的那样。您可能可以通过调整元素的位置来完成这项工作（我不能），但希望这在您的具体使用中不会有什么大不了的。

综上所述，jCarousel 似乎完全适合您正在做的事情，即使它确实增加了一些代码量。

于 2008-10-13T06:41:18.063 回答
0

查看 jCarousel Lite 插件。我发现它非常有用且易于配置。

http://www.gmarwaha.com/jquery/jcarousellite/index.php?#demo

于 2009-06-20T13:33:39.487 回答