带有内部块元素的 JQuery 滑块

Posted 2023-05-08

【中文标题】带有内部块元素的 JQuery 滑块

【英文标题】：JQuery Slider with interior Block Elements

【发布时间】：2010-09-16 12:42:46

【问题描述】：

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

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

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

【参考方案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 的样式以显示：内联，在隐藏溢出的容器内部。如果您只是将这些“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 似乎是专为您正在做的事情而设计的，即使它确实增加了一些代码量。

【讨论】：

对于像我这样的懒人来说，小提琴很容易;)

【参考方案2】：

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

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