Question

尝试创建一个图像轮播，其速度依赖于鼠标定位（即如果鼠标靠近屏幕边缘，它会快速移动，直接在中间，它不会移动等）我的问题现在是图像轮播完全没有移动。可能是因为它不起作用的各种原因，但我不确定为什么它不起作用，即使这是一个很好的＆＃39;轮播算法。

创建了一个我需要积极工作的速度功能，但是只有当我看到图像轮播实际移动时我才能知道。

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/

Answer 2

你有几个问题。

你得到的第一个问题是，那个位置＆＃34;亲戚＆＃34;或者＆＃34;绝对＆＃34;缺少ul。

carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 200px;
}

.carousel ul {
    position: absolute;
    display: block;
    list-style: none;
    white-space: nowrap;
}

然后你需要在开始另一个动画之前停止动画：

$ul.stop().animate

但最大的问题是，你的速度＆＃34;根本不是真正的速度。如果你的速度是＆＃34; 100＆＃34;，那就非常快。这意味着动画将在100毫秒内完成！这太快了，你看不到动画。

因此，如果您将鼠标移动到靠近画廊中间的位置，它会快速移动并且在它外面的边缘移动得很慢。

您可以通过从最高速度中减去实际的mpos值来确定您的速度：

var speed = ps * ps - (width % 100);

// SPEED FIX
speed = 5000 - (speed * 2);

这是小提琴： http://jsfiddle.net/56rwR/1/

BUT !!这就像地狱一样，因为它没有真正的速度..只有这个动画时间与ul宽度成正比..

我建议你在这里使用这样的脚本： http://bxslider.com/examples/ticker

并编写一个增加/减少速度的悬停事件。

jQuery图像轮播不滑动

Fiddle

JQuery的

HTML

2 个答案: