Question

我有html列表，想要从左到右动画，但是当它到达最后一点时，它应该旋转到它的第一个位置。只想要显示3个元素是强制性的。

当前行为：它不是循环的。

我试过这个

var $elements = $("#itemsListBox ul li");
var count = $elements.length;

$('.pp_arrow_previous').bind('click',function(){

    total=(Math.floor(count/6))*480;
    var e=$('#slider').css("left");
    e=parseInt(e);
    e=Math.abs(e);

    if(e==0)

    {
        $('#slider').css({ position: 'absolute' });
        $('#slider').css({ left: -(total)+'px' });
    }
    else
        $('#slider').animate({left: "+=480"}, "fast");

    //alert("Slider left is : "+e);

});

$('.pp_arrow_next').bind('click',function(){

    var e=$('#slider').css("left");

    total=(Math.floor(count/6))*480;
    e=parseInt(e);
    e=Math.abs(e);
    if(total<=e)
    {
        $('#slider').css({ position: 'absolute' });
        $('#slider').css({ left: '0px' });

    }
    else
        $('#slider').animate({left: "-=480"}, "fast");

});

这是我的小提琴http://jsfiddle.net/AtweK/2/

Answer 1

在为幻灯片设置动画之前，您必须先检查当前位置。

var item_count=8;
var item_per_page = 3;
var translate_step = parseInt(item_count/item_per_page);

$('#leftArrow').on("click", function() {
    if($('#slider').css('left') == -translate_step*288+'px') {
        $('#slider').animate({left: 0}, 500);
    } else {
        $('#slider').animate({left: "-=288"}, 500);
    }
});

$('#rightArrow').on("click", function() {
    if($('#slider').css('left') == '0px') {
        $('#slider').animate({left: -translate_step*288}, 500);
    } else {
        $('#slider').animate({left: "+=288"}, 500);
    }
});

$('#resetBtn').on("click", function() {
    $('#slider').animate({left: "0"}, 500);
});

这是fiddle

Answer 2

查看DEMO

基本上，为了给出圆形效果，你需要进行检查，看看幻灯片的当前左侧位置是否完全低于（小于）窗口或幻灯片的当前左侧位置是否完全高于（更多）（窗口+窗口宽度），当其中任何一个案例成立时，你相应地向左设置幻灯片（没有动画）

为了制作像幻灯片和优雅的旋转木马，您应该考虑以下几点：

窗口宽度 - 显示幻灯片的窗口
滑块总宽度 - 您需要具有滑块的总宽度（包含所有幻灯片）
框架宽度 - 单个幻灯片的宽度
窗口的左侧，幻灯片的当前左侧
您应该进行检查，幻灯片的左侧或右侧不应无限增加。
只要滑块达到一个极限，立即将其左侧设置为相应的极限

下面我做了一个非常简单（忽略太多平滑方面）的样本，它不是完整的，但满足你的要求：

<强>脚本：

<script>
    var sWidth = $('#slider').width();
    var wWidth = $('#itemsListBox').width();
    var fWidth = $('#slider li').width();
    function move(direction){
            var sOffset = $('#slider').offset();
            var wOffset = $('#itemsListBox').offset();
            var currentPosition = sOffset.left;

        switch(direction){
            case 'left':
                   if(sOffset.left+sWidth >= wOffset.left){
                      $('#slider').animate({left: "-=288"}, 500);
                   }
                   else{
                        $('#slider').css({left: wOffset.left + wWidth});
                   }
               break;

           case 'right':
                if(wOffset.left+wWidth >= sOffset.left) {
                     $('#slider').animate({left: "+=288"}, 500);
                }
                else{
                     $('#slider').css({left: -(wOffset.left +sWidth)});
                }
                break;

           case 'reset':
                $('#slider').animate({left: "0"}, 500);
                break;     
        }
    }
</script>

你的按钮就像：

 <button id="leftArrow" onclick="move('left');" class="fbtnFirst">Left</button>
 <button id="rightArrow" onclick="move('right');" class="fbtnLast">Right</button>
 <button id="resetBtn"  onclick="move('reset');" class="fbtnReset">Reset</button>

Answer 3

至少，你的其他陈述缺少括号。

Answer 4

尝试使用 JQuery plugin ，以获得流畅的圆形动画

在HTML列表中平滑圆形动画

4 个答案: