Question

我试图在滑块移动时显示图像。例如，我有2个图像，一个图像有溢出：隐藏和宽度：0％。因此，当我移动滑块时，第一张图像必须在第二张图像上增加其宽度。

这是我的HTML

<body>
    <div class="puppy"><img src="images/dog.jpg" /></div>
    <div class="kitten"><img src="images/cat.jpg" /></div>

    <div id="slider"></div>
</body>

这是我的JS

$(function() {
  $( "#slider" ).slider();
});

这是我的css

.puppy {
 overflow: hidden;
 position: absolute;
 width: 0;
}

这是JSFIDDLE：JSFIDDLE

如果有任何不清楚的地方请告诉我

Answer 1

您需要将 puppy 图像的宽度更改附加到滑块的滚动。而你还没有这样做。

我用这个来改变画廊中每行图像数量的形式内容

$( "#Slider" ).slider({
    value: $( "#ImagesNumber" ).val(),
    min: 1,
    max: 10,
    slide: function( event, ui ) {
        $( "#ImagesNumber" ).val( ui.value );
    }
});

其中：

value: $( "#ImagesNumber" ).val(),

设置初始数

min: 1,

设置最小数量

max: 10,

设置最高数字

slide: function( event, ui ) {$( "#ImagesNumber" ).val( ui.value );}

将数字的变化与滑块的滚动联系起来。

在你的情况下，它将是：

$( "#Slider" ).slider({
    value: $( ".puppy" ).css('width'),
    min: 0,
    max: 100,
    slide: function( event, ui ) {
        $( ".puppy" ).css('width', ui.value );
    }
});

我建议100的意思是100％ - 因为如果图像的像素大小会有所不同（当然，我认为最初可见的和最初隐藏的图像大小相同）。因此，您需要进行额外的计数以将百分比转换为像素。

我只建议从你的CSS中删除绝对位置和隐藏溢出，除非它绝对位于全文中 - 并且它的显示空间非常有限。然后你可以在你的CSS中让绝对位置和隐藏溢出。

如果你想显示小狗并隐藏小猫作为滑块滚动，你也可以额外计算宽度。

Answer 2

使用此FIDDLE的类似方法。

将一张图片设置为div的背景，将另一张图片设置为div，并使用滑块改变宽度。

JS

$( "#slider" ).slider({
                       value: 1,
                         min: 1,
                         max: 100,
                        step: 1,
                       slide: function( event, ui ) {
                                                     $( "#slidevalue" ).html( ui.value );
                                                     $('#mydog').css('width', (ui.value * 4) );
                                                     }
                       });

jquery ui滑块图像宽度

2 个答案: