如何知道我是否已到达最后“里”？物品

发布于 2024-10-12 16:32:04 字数 526 浏览 3 评论 0原文

我用“li”标签和 jquery 制作了一个幻灯片。

整个“ul”相对于“下一个”/“上一个”按钮向左或向右移动，其宽度等于所有幻灯片放在一起的总宽度，即每张 700 像素。并且在宽度等于 700px 的视口中只允许显示 1 张幻灯片。但是，当我单击“下一步”时，即使没有更多幻灯片，节目仍会继续。

解决方案是当最后一张幻灯片显示在视口中时隐藏“下一步”按钮。我该怎么做？

或者也许欢迎另一个解决方案...

这是我的简化代码：

var slideList = $('#slideWindow ul')

$('#next').click(function(e){

    slideList.animate({ 'left': '-=700px' });

    if( $('li:last').next() === 0 ){

        $(this).hide();

    } else {

        $(this).show();

    }

    return false;

});

原文

I've made a slide-show with 'li' tags and jquery.

The whole 'ul' moves to the left or right respective to the Next/Prev buttons and has a width equal to the total width of all the slides put together, i.e. 700px each. And only 1 slide is allowed to show in the viewport of width equal to 700px. But when I click next the show goes on even though there's no more slides.

The solution is to hide the Next button when the last slide shows up in the viewport. How do I do that?

Or maybe another solution is welcome...

This is my simplified code:

var slideList = $('#slideWindow ul')

$('#next').click(function(e){

    slideList.animate({ 'left': '-=700px' });

    if( $('li:last').next() === 0 ){

        $(this).hide();

    } else {

        $(this).show();

    }

    return false;

});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

满栀 2024-10-19 16:32:04

如果有一个特定的类 classBeingViewed 应用于当前正在查看的 li，您可以这样做：

if($('li').last() == $('li.classBeingViewed')){
    $(this).hide();
else {
    $(this).show();
}

或者您可以跟踪索引。这是更可取的，因为它允许两个方向的动画。

var slideList = $('#slideWindow ul');
var listIndex = 0;
var numLiElements = $('li').length;

$('#next').click(function(e){
    slideList.animate({ 'left': '-=700px' });
    if( listIndex == numLiElements ){
        $(this).hide();
    } else {
        listIndex += 1;
        $(this).show();
    }
    return false;
});

然后，当您想要反转动画时，可以将点击处理程序中的 listIndex 递减为 $('#previous')。

If there is a particular class classBeingViewed applied to li that is being viewed at the moment, you can just do:

if($('li').last() == $('li.classBeingViewed')){
    $(this).hide();
else {
    $(this).show();
}

Or you can keep track of the index. This is preferable since it allows animations in both directions.

var slideList = $('#slideWindow ul');
var listIndex = 0;
var numLiElements = $('li').length;

$('#next').click(function(e){
    slideList.animate({ 'left': '-=700px' });
    if( listIndex == numLiElements ){
        $(this).hide();
    } else {
        listIndex += 1;
        $(this).show();
    }
    return false;
});

Then, you can decrement listIndex in a click handler to $('#previous') when you want to reverse the animation.

回复收藏 0 原文

~没有更多了~