Question

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

但是，上一张幻灯片没有进入查看...我怎样才能让它工作？

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

Answer 1

我认为这就是你想要的。

你的利润率和下一个'slide_container li'以及悬停的'slide_container'一样。

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

Answer 2

Here's a working example of everything below

我的方法是首先简化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>

我没有使用所有固定宽度（例如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属性将最后一个元素移动到开头：< / p>

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

jQuery上一张幻灯片悬停

2 个答案: