이미지간에 jQuery Slider 위젯을 표시하고 사라지게하려면 어떻게해야합니까?

Question

내가해야 할 일에 매우 가까운 개념을 발견했습니다. 슬라이더를 사용하여 이미지를 희미하게 만듭니다.

여기에 jSFiddle에 대한 작업 예제가 있습니다.

여기 내 테스트 페이지입니다 : http://energync.ehclients.com/slider.html

내가의 코드를 가져하지만 나를 위해 제대로 작동하지 않습니다. 다음은 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'); 
} 
}); 
}); 

입니다

<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> 

: 여기

는 HTML입니다.

Answer 1

당신의 바이올린은 나를 위해 잘 작동합니다. 사용자가 여전히 슬라이더를 잡고있을 때 이미지가 변경되기를 원하십니까? (출시 될 때뿐만 아니라)