Question

我认为使用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是列表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/

Answer 1

首先，您似乎正在添加和删除样式表中不存在的名为“可见”的类。

接下来，您在隐藏时将不透明度设置为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'），无论它出现在哪里。

这将初始设置每个滑块元素显示：none（当然，除了第一个）。然后当淡出一个元素时，动画结束时会有一个回调来设置display：none。

淡入淡出在元素中，您需要在动画前设置display：block，并将不透明度设置为0，这样您仍然可以获得淡入淡出效果。

自定义jQuery滑块上的奇怪行为

1 个答案: