1

必要なことに非常に近い概念を見つけました。スライダーを使用して画像間をフェードします。

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');
}
});
});

これを正しく機能させるための助けをいただければ幸いです。

4

1 に答える 1

1

あなたのフィドルは私にとってはうまくいきます。ユーザーがまだスライダーを保持しているときに画像を変更しますか? （発売時だけではありません）

于 2013-02-26T16:00:25.817 に答える