0

jQueryを使用して独自のカスタムコンテンツスライダーを作成するのは簡単だと思い、まともなものを作成することができました。スライダーラッパー内に、スライダーのコンテンツとスライダーのリストがあります。スライダーには、3つのコンテンツ領域のうちの1つのみが表示されています。

これはスライダーのHTMLです。

<div id="featured_wrapper">

    <ul id="featured_content">

        <li class="item" id="item-3">
            <h1>Title item 3</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </li>

        <li class="item" id="item-2">
            <h1>Title item 2</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </li>

        <li class="item" id="item-1">
            <h1>Title item 1</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </li>

    </ul><!--/featured_content-->

    <ul id="featured_list">

        <li class="item-link" id="item-link-3">
            <div class="item-container">
                <h2>Title item 3</h2>
            </div>
        </li>

        <li class="item-link" id="item-link-2">
            <div class="item-container">
                <h2>Title item 2</h2>
            </div>
        </li>

        <li class="item-link" id="item-link-1">
            <div class="item-container">
                <h2>Title item 1</h2>
            </div>
        </li>

    </ul><!--/featured_list-->

</div><!--/featured_wrapper-->

#featured_contentはコンテンツdiv、#featured_listはリストdivです。

これはCSSです：

#featured_wrapper { background: transparent url('/Files/System/web/gfx/featured_content_item_bg.jpg') repeat-x top left; overflow: hidden; }
#featured_content { float: left; height: 390px; width: 622px; background: transparent url('/Files/System/web/gfx/featured_content_item_bg.jpg') repeat-x top left; position: relative; }
#featured_content li { position: absolute; display: block; width: 622px; height: 390px; }
#featured_list { float: right; height: 390px; width: 338px; background: transparent url('/Files/System/web/gfx/featured_content_list_bg.png') repeat-y 0 -260px; }
.item-link { height: 70px; padding: 30px 20px 30px 45px; cursor: pointer; }
.item-link h2 { font-weight: bold; font-size: 16px; line-height: 1; }

そしてここにjQueryコードがあります：

var bgpos    = new Array();
    bgpos[0] = -260;
    bgpos[1] = -130;
    bgpos[2] = 0;
$('#featured_content .item:not(:first-child)').css({'opacity': 0, 'margin-top': -20});
$('#featured_content .item:first-child').addClass('visible');
$('#featured_list .item-link').click(function(){

    var item = $(this).attr('id').split('-');
    var item_index = $(this).index();
    var item_id = 'item-' + item[2];

    /*
    $('#featured_content .item:not(#' + item_id + ')').fadeOut('fast');
    $('#featured_content #' + item_id).fadeIn('fast');
    */

    $('#featured_content .item:not(#' + item_id + ')').animate({
        marginTop: -20,
        opacity: 0
    }, 200).addClass('visible');

    $('#featured_content #' + item_id).animate({
        marginTop: 0,
        opacity: 1
    }, 200).removeClass('visible');

    $('#featured_list').stop().animate({'backgroundPosition': '(0 ' + bgpos[item_index] + 'px)'}, {duration: 200});

});

問題は、最初のアイテム（item-3）が表示されていても、テキストは選択できませんが、その下のレイヤーは選択できることです。私が設定したこのテストページのコンテンツ領域にあるリンクをクリックしてみてください。

http://dev.drumroll.no/jquery-slider-fail/

4

1 に答える 1

1

まず、スタイルシートに存在しない「visible」というクラスを追加および削除しているようです。

次に、非表示にするときに不透明度を0に設定しますが、それによって要素が消えることはありません。不透明度が0であっても、一番上にある要素はクリックイベントを受け取る要素になります。

このコード行を見てください...

    $('#featured_content .item:not(:first-child)').css({'opacity': 0, 'margin-top': -20});

不透明度をゼロではなく.20に設定します。問題が表示されます。

解決策は次のとおりです。

コードを次のように変更します。

$('#featured_content .item:not(:first-child)').css({'opacity': 0, display:'none', 'margin-top': -20});
$('#featured_content .item:not(#' + item_id + ')').animate({
                    marginTop: -20,
                    opacity: 0
                }, 200, function(){$(this).css({display:'none'});});

$('#featured_content #' + item_id).css({display:'block',opacity:0})
                                  .animate({
                    marginTop: 0,
                    opacity: 1
                }, 200);

また、addClass（'visible'）とremoveClass（'visible'）が表示されている場所を削除します。

これにより、最初に各スライダー要素がdisplay：noneに設定されます（もちろん、最初の要素を除く）。次に、要素をフェードアウトするときに、アニメーションの最後にdisplay：noneを設定するためのコールバックがあります。

要素でフェードインする場合は、アニメーションの前にdisplay：blockを設定し、不透明度を0に設定して、フェードイン効果を維持する必要があります。

于 2010-01-19T14:22:48.427 に答える