2

私はこのスライドショーを使用しています: http ://www.zurb.com/playground/orbit-jquery-image-slider そして各スライドのボディクラスを変更したいので、異なる背景色を適用できます。

私はこのようなものを持っています:

if($('#featured').find('img[src="/01.jpg"]')) {
    //alert('img exists');
    $('body').addClass('option_a');
} else if
    //alert('img dosnt exists');
    ($('#featured').find('img[src="/02.jpg"]')) {
    //alert('img exists');
    $('body').addClass('option_b');
} else {
    $('body').addClass('option_c');
}

しかし、私のjavascriptはまだかなり貧弱なので、いくつかのガイダンスまたは代替アプローチを使用できます。どうもありがとう :)

4

1 に答える 1

0

画像に依存するスタイリングに関する情報は、画像のタグに格納することが望ましいと思います。

これにより、スライドに新しい画像を追加するときに JavaScript コードを変更する必要がなくなります。

<div id="featured"> 
     <img src="overflow.jpg" alt="Overflow: Hidden No More" data-class="option-a" />
     <img src="captions.jpg"  alt="HTML Captions" data-class="option-b" />
     <img src="features.jpg" alt="and more features" data-class="option-c" />
</div>

<script>
$('#featured').orbit({afterSlideChange: function() {
    $('body').attr('class', $(this).data('class'));
}});
</script>
于 2012-09-18T12:05:34.623 に答える