0

我想我可以制作自己的动态幻灯片脚本。

function slider( container )
{
    var time = 1200;
    var width = 1000;
    var container = document.getElementById(container);
    var name = container.childNodes[1].className;
    var content = document.getElementsByClassName(name);

    var num = ( content.length * width );

    next = function()
    {           
        var px = container.style.marginLeft;
        var diff = Math.abs( px.replace( 'px', '' ) );
        var shifted = ( diff ) ? ( diff / width ) : '0';

        shifted++;

        if ( shifted == content.length )
        {
            shifted = 0;

            shift();
        }

        container.style.marginLeft = ( shifted == content.length ) ? '0' : '-' + ( shifted * width ) + 'px';
    }

    shift = function()
    {   
        for ( var i = 0; i < content.length; i++ )
        {
            var delay = ( ( i + 1 ) * time );

            setTimeout( next, delay );
        }
    }

    container.style.width = num + 'px';

    shift();
}

适用于所有其他幻灯片容器。幻灯片总是由内部函数改变

函数下一个（）

此函数确定下一张幻灯片以及幻灯片何时结束以使用另一个内部函数重置它们

函数移位（）

对于不同的 DIV 容器使用不同的变量可以互换，但是当我尝试运行多个实例时，如下所示

滑块（“元素”）；滑块（“元素2”）；

起初它运行代码并循环遍历所有元素的幻灯片，但只有第一个实例会正确重置并继续从头到尾“滑动”，一遍又一遍。在重复实例被 shift()'d 后，不需要为重复实例调用所需的 next()。

将 slider() 完全移出主类并从页面调用它是相同的结果。

摆弄一下，因为它可能是一个单行修复。

http://jsfiddle.net/6LeUR/

4

1 回答 1

1 
var content = document.getElementsByClassName(name);

…将在整个页面上找到具有该类的所有元素，而不仅仅是在该滑块中。尝试将其更改为：

var content = container.getElementsByClassName(name);

此外，在var之前添加next =和shift =。试试看。

于 2013-04-29T00:30:27.397 回答