Question

我正在做一些非常错误的事情，但却无法找到解决方案。

情况： 我有很多产品，每个产品都有很多报价。那些引用会自动滚动div。如果滚动到达最后一个引号，则滚动回到第一个引号。

什么有效： 该函数在应用于1 div时基本上有效，但是当应用于多个div时，它不会回滚到第一个div或者无休止地滚动。

这是我为此写的功能：

function quoteSlide(divname){
$total = ($(divname+" > div").size())
$width = $total * 160;
$(divname).css('width', ($width));
console.log ($totalleft *-1);
if ($width - 160 > $totalleft *-1){ 
    $currentleft =  $(divname).css('left');
    $step = -160;
    $totalleft = parseInt($currentleft)+$step;
}else{
    $totalleft = 0;
}

$(divname).animate(
    { 
        left: $totalleft
    }, // what we are animating
    'slow', // how fast we are animating
    'swing', // the type of easing
    function() { // the callback
    });

}

它由以下内容执行：quoteSlide('#quotecontainer_1');并结合setInterval，因此它会自动滚动。

这是jsFiddle出错的地方（因此应用于超过1个div）http://jsfiddle.net/FsrbZ/。这是一切顺利的jsFiddle。（适用于1 div）

更改以下内容时：

   quoteSlide('#quotecontainer_1');
   quoteSlide('#quotecontainer_2');
setInterval(function() {
     quoteSlide('#quotecontainer_1');
     quoteSlide('#quotecontainer_2');
}, 3400);

到

quoteSlide('#quotecontainer_1');

setInterval(function() {
     quoteSlide('#quotecontainer_1');
}, 3400);

它确实有效......但仅限于1个引用容器。

Answer 1

This works.正如Matei Mihai已经提到的，$totalleft变量在调用中共享。此外，我还将setInterval调用移到了quoteSlide()函数中，因此您无需重复自己。

我已将变量移入quoteSlide()函数，因此每次调用都会获得该变量的实例。

关于JavaScript的另一件事：

Javascript 不是 PHP，您不需要在变量前添加$ - 符号！就个人而言，我使用约定为所有jQuery对象添加$。

PS：您可能想要删除对callback()的第一次调用，以允许访问者实际读取第一个引用。我已经把它包括在内了，因为这是它在原始代码中的工作方式。

function quoteSlide(divname) {
    var $totalleft = 0;
    var callback = function() {
        $total = ($(divname + " > div").size())
        $width = $total * 160;
        $(divname).css('width', ($width));
        if ($width - 160 > $totalleft * -1) {
            $currentleft = $(divname).css('left');
            $step = -160;
            $totalleft = parseInt($currentleft) + $step;
        } else {
            $totalleft = 0;
        }

        $(divname).animate({
            left: $totalleft
        }, 'slow', 'swing', function() {});
    };
    callback(); # <-- I would remove this
    setInterval(callback, 3400);
}

quoteSlide('#quotecontainer_1');
quoteSlide('#quotecontainer_2');

Answer 2

那是因为你的函数对所有调用使用相同的$totalleft变量，所以当你多次调用函数时，你在$totalLeft变量中存储的数字是不正确的。

查看此http://jsfiddle.net/FsrbZ/3/

var $totalleft = new Array();
function quoteSlide(divname){
    $total = ($(divname+" > div").size())
    $width = $total * 160;
    $(divname).css('width', ($width));
    if ($width - 160 > $totalleft[divname] *-1){ 
        $currentleft =  $(divname).css('left');
        $step = -160;
        $totalleft[divname] = parseInt($currentleft)+$step;
    }else{
        $totalleft[divname] = 0;
    }

    $(divname).animate(
        { 
            left: $totalleft[divname]
        },
        'slow', 
        'swing',
        function() { 
        });
}

Answer 3

嗯，有些人更快，但这是另一个解决方案，这是有效的：http://jsfiddle.net/FsrbZ/6/

Answer 4

试试这个

http://jsfiddle.net/FsrbZ/10/

我添加了一个if语句，当该变量小于-490时重置该变量（当计数器进入第4步时）

Answer 5

关于什么

$total = ($(divname+" div").size())？

http://jsfiddle.net/SnakeEyes/FsrbZ/2/

如果这就是您想要的，请告诉我

多个div类上的相同功能不起作用

5 个答案: