Question

我以为我可以创建自己的动态幻灯片脚本。

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();
}

适用于所有其他幻灯片容器。幻灯片始终由内部功能

更改

function next（）

此功能确定下一张幻灯片以及幻灯片何时结束以使用其他内部功能重置它们

function shift（）

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

slider（'element'）; slider（'element2'）;

首先它运行代码并循环浏览所有元素的幻灯片，但只有FIRST实例才会正确重置并从头到尾继续“滑动”，一遍又一遍。在重复的实例为shift（）之后，不会为重复项调用所需的next（）。

在主类之外移动slider（）并从页面调用它是相同的结果。

摆脱困境，因为它可能是一线修复。

http://jsfiddle.net/6LeUR/

Answer 1

var content = document.getElementsByClassName(name);

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

var content = container.getElementsByClassName(name);

此外，请在var和next =之前添加shift =。的 Try it.

在同一页面上重复使用时，自定义功能会“中断”

1 个答案: