Question

I thought it would be easy to create my own custom content slider with jQuery, and managed to create a decent one. Within the slider wrapper, I have a slider content and slider list. The slider is only showing one of three content areas.

This is the HTML for the slider:

<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 is the content div, and #featured_list is the list div.

This is the 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; }

And here is the jQuery code:

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

});

The problem is that even if the first item (item-3) is visible, the text isn t selectable, but the layer beneath it is. Try clicking the links in the content area on this test page I ve set up:

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

Answer 1

First, you seem to be adding and removing a class called visible that doesn t exist in your style sheet.

Next, you re setting opacity to 0 when hiding, but that doesn t make the element go away. Whichever element is on top will still be the one receiving the click event, even though its opacity is 0.

Take this line of code...

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

and set the opacity to .20 instead of zero. You ll see the problem.

Here s a solution:

Change your code to the following:

$( #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);

Also, remove addClass( visible ) and removeClass( visible ) wherever it appears.

This will initially set each slider element to display:none (except, of course, for the first one). Then when fading out an element, there s a callback at the end of the animation to set display:none.

When fading In an element, you need to set display:block before the animation, and set opacity to 0 so you still get the fadeIn effect.

友情链接