如何让jQuery Slider Widget在图像之间显示和淡入？

我发现了一个非常接近我需要做的概念：使用滑块在图像之间淡入淡出。如何让jQuery Slider Widget在图像之间显示和淡入？

以下是jSFiddle的工作示例。

这里是我的测试页：http://energync.ehclients.com/slider.html

我带来的代码，但它不是为我工作正常。

下面是HTML：

<div class="ui-corner-all" id="sliderContent">  
<div class="viewer ui-corner-all"> 
<div class="content-conveyor ui-helper-clearfix" style="width: 2128px;"> 

<div class="item"> 
<h2>Omega Nebula</h2> 
<img alt="Omega Nebula" src="http://d2o0t5hpnwv4c1.cloudfront.net/377_slider/slider_sourcefiles/images/omega.jpg"> 
</div> 

<div class="item"> 
<h2>Rosette Nebula</h2> 
<img alt="Rosette Nebula" src="http://d2o0t5hpnwv4c1.cloudfront.net/377_slider/slider_sourcefiles/images/rosette.jpg"> 
</div> 
</div> 
</div> 
</div> 
<div id="slider"></div>

这里是CSS

#sliderContent .item { display: none; position: absolute; }

这里是jQuery的

$(function() { 
$('#sliderContent .item:first').addClass('shown').show(); 
$("#slider").slider({ 
value: 0, 
min: 0, 
max: $('#sliderContent .item').size(), 
step: 1 
}).bind("slidechange", function(event, ui) { 
var newIndex = $("#slider").slider("value"); 
var oldIndex = $('#sliderContent .item').index('.shown'); 
if (newIndex != oldIndex) { 
$('.shown').fadeOut().removeClass('shown'); 
$('#sliderContent .item').eq(newIndex).fadeIn().addClass('shown'); 
} 
}); 
});

我将不胜感激一些帮助得到这个才能正常工作。

来源

2013-02-26 fmz

你的小提琴对我来说工作得很好。当用户仍然握住滑块时，是否要更改图像？（不只是当它被释放）

来源

2013-02-26 16:00:25 Ven

嗨，小提琴工作正常，但我不能得到真正的文件工作。我希望它在移动时改变，而不是在发布时改变。 – fmz 2013-02-26 16:04:31

尝试[幻灯片事件]（http://api.jqueryui.com/slider/#event-slide） – Ven 2013-02-26 16:05:23

上面的代码包含滑块事件。这是我第一次使用这个小部件，我不清楚它是如何实现的。 – fmz 2013-02-26 16:10:01

如何让jQuery Slider Widget在图像之间显示和淡入？

回答

相关问题