Question

到目前为止，我点击滚动列表项目时使用下面的代码：

$('li#news-back').click(function(){
        $('li.news-item').animate({
            left : '-=960px'
        });
        //$('li.news-item:first').insertAfter('li.news-item:last');
});
$('li#news-forward').click(function(){
            $('li.news-item').animate({
                left : '+=960px'
            });
            //$('li.news-item:last').inserBefore('li.news-item:first');
});

每个列表项目的宽度为960px，项目向左浮动，在任何给定时间只有一个项目显示在容器中。单击向前向前将根据宽度为li设置动画，使下一个或上一个可见..

问题是现在有4个项目。因此，我需要将第一个项目添加到结尾或列表中，或者在单击时将列表的最后一个添加到列表中，作为我已注释掉的代码。

在firebug中看到它似乎正在按照我的希望重新排列内容，但它在浏览器中不起作用（获得一些非常奇怪的结果 - 当第二个应该可见时跳到第3个等）。

另一种解决方案可能是使用if语句来表示（我们是在操纵左边的属性） - 当返回是单击时如果left = 0什么都不做或者警告列表中没有更多 - 那么如果向前点击说如果left = 2880什么都不做，因为你将在列表的末尾..

任何指针都非常感激。

Answer 1

这种跳跃效果的原因是你的元素彼此相对，并且从前面取一个所有元素都在移动，低于3个工作示例（我为所有这些示例使用了相同的HTML和CSS）

在1到5之间滚动，如果没有上一个或下一个项目则停止
在1到5之间滚动并回放到上一个或第一个元素
Inifite scroll

HTML：

<a id="news-back" href="#">&lt;--</a>
<a id="news-forward" href="#">--&gt;</a>
<div id="outer-wrapper">
    <div id="inner-wrapper">
        <div class="item">text1</div>
        <div class="item">text2</div>
        <div class="item">text3</div>
        <div class="item">text4</div>
        <div class="item">text5</div>
    </div>
</div>

CSS：

#outer-wrapper{width:960px;height:200px;display:block;overflow:hidden;}
#inner-wrapper{width:3840px;height:220px;position:relative;}
.item{width:960px;height:200px;display:block;float:left;position:relative;}

JavaScript - 仅在上一个和下一个项目存在时设置动画

<script type="text/javascript">
$(function(){
    var width=960;
    var current=1;
    var count=$('#inner-wrapper .item').size();
    $('#inner-wrapper').css({width:count*width});
    $('#news-back').click(function(){
        if(current>1){
            $('#inner-wrapper .item').animate({left:'+='+width+'px'},500);
            current--;
        }
        return false;
    });
    $('#news-forward').click(function(){
        if(current<count){
            $('#inner-wrapper .item').animate({left:'-='+width+'px'},500);
            current++;
        }
        return false;
    });
});
</script>

JavaScript - 有倒带，如果下一个不存在则转到第一个，如果不存在，则倒回到最后一个项目：

<script type="text/javascript">
$(function(){
    var width=960;
    var current=1;
    var count=$('#inner-wrapper .item').size();
    $('#inner-wrapper').css({width:count*width});
    $('#news-back').click(function(){
        if(current>1){
            $('#inner-wrapper .item').animate({left:'+='+width+'px'},500);
            current--;
        }else{
            $('#inner-wrapper .item').animate({left:'-'+(count-1)*width+'px'},500);
            current=count;
        }
        return false;
    });
    $('#news-forward').click(function(){
        if(current<count){
            $('#inner-wrapper .item').animate({left:'-='+width+'px'},500);
            current++;
        }else{
            $('#inner-wrapper .item').animate({left:'0px'},500);
            current=0;
        }
        return false;
    });
});
</script>

当然总有更好的方法可以做到这一点，但这个对我很有用：）

现在无限：

$(function(){
    var width=960,sign="-";
    $("#news-back").click(function(){
        sign='+';
        scroll_me();
        return false;
    });
    $("#news-forward").click(function(){
        sign='-';
        scroll_me();
        return false;
    });

    function scroll_me(){
        if(!$("#inner-wrapper").is(':animated')){
            switch(sign){
                case('-'):
                    $("#inner-wrapper").stop(false,true).animate({left:"-="+width+"px"},500,function(){
                        $(this).css({left:0}).append(jQuery(".item",jQuery(this)).eq(0));
                    });
                break;
                default:
                    $("#inner-wrapper").css({left:'-'+width+'px'});
                    $("#inner-wrapper .item:first").before(jQuery("#inner-wrapper .item:last"));
                    $("#inner-wrapper").stop(false,true).animate({left:"+="+width+"px"},500,function(){
                        $(this).css({left:0});
                    });
                break;
            }
        }
    }

});

以上脚本滚动整个#inner-wrapper而不是全部.item，它类似但值得一提。

如果您有任何问题，请告诉我。

干杯

-G。

创建一个简单的li滑块（无限或带'倒带'/停止）

1 个答案: