javascript - jQuery 图像轮播不滑动

Question

尝试创建一个图像轮播，其速度取决于鼠标定位(即，如果鼠标靠近屏幕边缘，它会快速移动，直接在中间它不会移动等)我现在的问题图像轮播根本不移动。可能有多种原因导致它不起作用，但我不太确定它为什么不起作用，或者即使这是一个“好”轮播算法。

创建了一个速度函数，我确信它需要工作，但只有在看到图像轮播实际移动时我才能知道。

Fiddle

JQuery

$(document).ready(function(){
    $('.carousel').mousemove(function(e) {
        var mpos = e.pageX;
        var speed = $(this).getSpeed(mpos);
        var dir = $(this).getDir(mpos);
        var $ul = $(this).children('ul');
        var cwidth = $ul.width();

        $('#speed').html(speed);

        if(speed != 0) {
            if(dir == -1){
                $ul.animate({
                    left: 0
                }, speed, 'linear');
            }
            if(dir == 1){
                $ul.animate({
                    left: -cwidth
                }, speed, 'linear');
            }
        }

    });
});

$.fn.getSpeed = function(mpos){
    var width = $(this).width();
    var center = width/2;
    var ps = (mpos-center)/10;
    var speed = ps * ps - (width % 100);

    if(speed >= 0) return speed;
    else return 0;
};

$.fn.getDir = function(mpos){
    var width = $(this).width();
    var center = width/2;

    if(mpos > center) return 1;
    else return -1;
};

HTML

<div class="carousel">
    <ul>
        <li><img src="http://placehold.it/200x200"/></li>
        <li><img src="http://placehold.it/200x200"/></li>
        .
        .
        .
        <li><img src="http://placehold.it/200x200"/></li>
    </ul>
</div>
<div id="speed"></div>

Answer 1

您必须修复代码才能真正执行您想要的操作，但如果添加以下 css，则不动画的主要问题就可以解决:

.carousel ul {
  position:relative;
  left:0px;

如果遇到问题，请务必检查文档: http://api.jquery.com/animate/