Странное поведение на заказном слайдере jQuery - PullRequest
Новая
       21

Странное поведение на заказном слайдере jQuery

0 голосов
/ 19 января 2010

Я думал, что было бы легко создать свой собственный слайдер контента с помощью jQuery, и мне удалось создать приличный.В оболочке слайдера у меня есть содержимое слайдера и список слайдеров.Слайдер показывает только одну из трех областей содержимого.

Это 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 - это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});

});

Проблема в том, что даже если первый элемент(элемент-3) виден, текст нельзя выделить, но слой под ним есть.Попробуйте щелкнуть ссылки в области содержимого на этой настроенной мной тестовой странице:

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

1 Ответ

1 голос
/ 19 января 2010

Во-первых, вы, кажется, добавляете и удаляете класс с именем '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 («видимый») и removeClass («видимый») везде, где он появляется.

Это первоначально установит отображение каждого элемента ползунка: нет (кроме, конечно, для первого). Затем при исчезновении элемента в конце анимации выполняется обратный вызов для установки отображения: нет.

При исчезновении В элементе вам нужно установить display: block перед анимацией и установить непрозрачность в 0, чтобы вы все равно получали эффект fadeIn.

...