jQuery 上一张幻灯片悬停

Question

我设置了脚本，以便当用户单击上一个链接时，它将显示上一张幻灯片，但是，我已经设置了它，以便当用户将鼠标悬停在下一个和上一个按钮上时，下一个/上一个按钮的一小部分当鼠标移离这些按钮时，幻灯片会弹回查看，然后再次隐藏。

但是，上一张幻灯片无法查看......我怎样才能让它发挥作用？

我已经创建了我的脚本的 jsfiddle - http://jsfiddle.net/BHbGY/1/

Answer 1

这是以下所有内容的工作示例。

我的方法是首先简化 html：

<div id="slide_nav">
   <a href="#" class="prev">« Previous</a>
   <a href="#" class="next">Next »</a>
</div>
<ul id="slide_container">
   <li class="one slide">one</li>
   <li class="two slide focused">two</li>
   <li class="three slide">three</li>
</ul>

而不是使用所有固定宽度（例如 width: 9999px;），我将所有 li 属性设置为 100% 的宽度并使用绝对位置。然后，您只需更改 left 属性即可移动事物。

#slide_container li {
   width: 100%;
   height: 600px;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
}

#slide_container .one {
   background-color: #900;
   left: -100%;    
}

#slide_container .two {
   display: block;
   background-color: #090;
}

#slide_container .three {
   background-color: #009;
   left: 100%;   
}

乍一看这可能看起来很棘手，因为 animate 不太喜欢百分比。但是您的元素将自动填充其容器，因此值得在页面加载时进行额外的小转换以使其全部正常工作：

    // change all percentages to pixels because animate hates percent
    // and seems to lose position over time
    var base = 0-$('#slide_container li').eq(0).outerWidth(true);
    $('#slide_container li').each(function() {
       var $this = $(this);
       $this.css('left', base+'px');
       base += $this.outerWidth(true);
    });

然后创建一个插件，这将简化您的代码结构：

$.fn.extend({
    slideMyDivs: function(method, amount) {
        if (!amount) {
            amount = this.eq(0).outerWidth(true);
        }
        switch (method) {
        case 'prev':
            this.stop(true, true).animate({
                left: '+=' + amount
            }, {
                duration: 600,
                easing: 'easeInOutExpo'
            });
            break;
        case 'next':
            this.stop(true, true).animate({
                left: '-=' + amount
            }, {
                duration: 600,
                easing: 'easeInOutExpo'
            });
            break;
        default:
            throw new Error('Invalid method: ' + method);
        }
        return this;
    }
});

然后我将设置一个方法来禁用链接，当您到达列表的结尾/开头：

function toggleLinks() {
    if (!hasPrev()) {
        $('#slide_nav .prev')
            .addClass('disabled')
            .bind('click.disabled', function() { return false; });
    }
    else {
        $('#slide_nav .prev').removeClass('disabled').unbind('.disabled');
    }

    if (!hasNext()) {
        $('#slide_nav .next').addClass('disabled').bind('click.disabled', function() {
            return false;
        });
    }
    else {
        $('#slide_nav .next').removeClass('disabled').unbind('.disabled');
    }
}

或者，如果您希望它循环回来（这有点超出了这个问题的范围），您可以通过将最后一个元素设置为 left 将其移动到开头css 属性如下：

function send_to_start($elm) {
   var newPos = $('#slide_container li').eq(0).pos().left - $elm.outerWidth(true);
   $elm.css('left', newPos+'px');
}

然后我会像这样设置事件：

$('#slide_nav a').mouseenter(function() {
    if ($(this).hasClass('disabled')) {
        return false;
    }
    else {
        var p = $(this).hasClass('prev') ? 'prev' : 'next';
        showPreview(p);
    }
}).mouseleave(function() {
    cancelPreview($(this).hasClass('prev') ? 'prev' : 'next');
});

$('#slide_nav .prev').click(function() {
    cancelPreview('prev');
    if (hasPrev()) {
        $('#slide_container li').slideMyDivs('prev').filter('.focused').removeClass('focused').prev().addClass('focused');
        toggleLinks();
    }
    return false;
});

$('#slide_nav .next').click(function() {
    cancelPreview('next');
    if (hasNext()) {
        $('#slide_container li').slideMyDivs('next').filter('.focused').removeClass('focused').next().addClass('focused');
        toggleLinks();
    }
    return false;
});

以下是这些事件处理程序调用的杂项函数：

function showPreview(method) {
    var p = method == 'prev',
        $n = p ? $('#slide_container li.focused').prev() : $('#slide_container li.focused').next();
    $n.addClass('previewActive')
        .slideMyDivs((p ? 'prev' : 'next'), '75');
}

function cancelPreview(method) {
    var p = method == 'prev';
    $('#slide_container li.previewActive')
        .removeClass('previewActive')
        .slideMyDivs((p ? 'next' : 'prev'), '75');
}

function hasPrev() {
    return $('#slide_container .focused').prev().length > 0;
}

function hasNext() {
    return $('#slide_container .focused').next().length > 0;
}

function toggleLinks() {
    if (!hasPrev()) {
        $('#slide_nav .prev')
            .addClass('disabled')
            .bind('click.disabled', function() { return false; });
    }
    else {
        $('#slide_nav .prev').removeClass('disabled').unbind('.disabled');
    }

    if (!hasNext()) {
        $('#slide_nav .next').addClass('disabled').bind('click.disabled', function() {
            return false;
        });
    }
    else {
        $('#slide_nav .next').removeClass('disabled').unbind('.disabled');
    }
}

Answer 2

我想这就是你想要的。

您刚刚关闭了边距以及下一个中的“slide_container li”和上一个中的“slide_container”以进行悬停。

http://jsfiddle.net/BHbGY/3/