Question

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

任何人都有这方面的快速解决方案吗？我基本上想要在<div>内使用文本和可能的图像，而不是使用图像。

我确实找到了jCarousel，看起来好像有效，但我正在寻找更轻巧的东西？有什么想法吗？

Answer 1

我认为我有点有一个你正在尝试做的事情的实例，但有几个问题。

使用您发布的示例作为基础，您可以将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的样式显示：内联，在一个隐藏溢出的容器内。如果您只是将这些“文本和图像块”DIV设置为内联显示，那么尝试正确显示所有内容将会非常令人头疼。你可能想把它们全部浮起来。

但是，浮动的元素不会很好地与容器“div-that-gets-cropped”DIV一起玩，因为它被“sliderGallery”DIV“揭示”的方式（at至少这是我在Firefox 3.03中遇到的情况）。我通过为“div-that-crop-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的“左”值以匹配最终的宽度（如果文本的大小最终改变宽度，这可能会很棘手） “text-and-images-chunk”元素。）

我注意到的一个问题是，当你在块级元素中拥有图像时，没有一种好方法可以让它们“拥抱”底部，就像在示例中使用内联一样。你可以通过玩元素的定位来实现这个功能（我做不到），但希望这对你的具体用法来说不是什么大问题。

所有这一切都表明，jCarousel看起来似乎是用于你正在做的事情，即使它确实增加了一些代码量。

Answer 2

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

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

JQuery滑块与内部块元素

2 个答案: