jQuery上一张幻灯片悬停

我对脚本进行了设置，这样当用户单击上一个链接时，它将显示上一张幻灯片，但是，我对脚本进行了设置，这样当用户将鼠标悬停在下一个和上一个按钮上时，下一张/上一张幻灯片的一小部分将被弹入视图，然后当鼠标从这些按钮上移开时再次隐藏

但是，上一张幻灯片不是用来查看的…我如何才能让它工作

---

我已经创建了一个JSFIDLE脚本-

我想这就是您想要的

你刚刚把你的边距和下一页的“slide\u container li”和上一页的“slide\u container”都去掉了

我的方法是首先简化html：

<div id="slide_nav">
   <a href="#" class="prev">&laquo; Previous</a>
   <a href="#" class="next">Next &raquo;</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>

这在一开始可能看起来很棘手，因为

动画制作
不太喜欢百分比。但您的元素将自动填充其容器，因此值得在页面加载上进行额外的小转换，以使其正常工作：

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

下面是这些事件处理程序调用的misc函数：

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

它在Firefox 10中运行良好…当你在红色幻灯片上的上一个链接上悬停时，我需要蓝色的一个出现-黑色是背景哦，没有注意到…虽然它是幻灯片，但不幸的是，我不知道如何使它循环，所以当你悬停时，它看起来像是在循环
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');
    }
}