我正在尝试构建一个jQuery滑块。
这将淡入并淡出“卡在”同一位置的图像。 (这个解释是否清楚)。
有点像这样:
http://d2o0t5hpnwv4c1.cloudfront.net/377_slider/slider_sourcefiles/slider.html
但没有水平移动。
你能指出类似的东西,所以我可以修改它以达到我的目的,但仍然不需要重新发明轮子吗?
答案 0 :(得分:3)
这样的东西? http://jsfiddle.net/Ender/9zqbY/
使用jQueryUI滑块小部件,您应该可以非常轻松地实现它。我的演示远非完美,但它应该足以让你走上正确的轨道。使用jQueryUI滑块,您可以将函数绑定到slidechange
事件,以淡入淡出图像。以下是该功能的示例:
$('#slider').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');
}
});
祝你好运!