Question

我正在尝试创建一个页面，用户可以通过单击按钮将jquery滑块库添加到页面中。

我几乎已经开始工作但是当有多个滑块时，我在附加滑块上旋转图像时遇到问题。原来的slder跳了起来，只显示了两张图片。

我创建了一个jsfiddle来演示http://jsfiddle.net/UUKP4/25/

其他滑块只循环一次然后停止

任何帮助都非常感激。

小提琴代码

的CSS：

    #slideshow {
        position:relative;
        height:350px;
    }
    #slideshow IMG {
        position:absolute;
        top:0;
        left:0;
        z-index:8;
        opacity:0.0;
    }
    #slideshow IMG.active {
        z-index:10;
        opacity:1.0;
    }
    #slideshow IMG.last-active {
        z-index:9;
    }

的JScript

    var i;
    var topplus=50;
    function buildslider(i, id, content) {

        id = id + i;

        var newdiv = document.createElement('div');
        newdiv.setAttribute('id', id);
        newdiv.style.position = "absolute";
        newdiv.style.top = +topplus + "px";
        newdiv.style.left = +topplus + "px";
        newdiv.style.display = 'inline-block';

        newdiv.style.width = '320px';
        newdiv.style.height = '270px';
        newdiv.innerHTML = content;
        document.getElementById("content").appendChild(newdiv);            
        topplus=topplus+150;

        function slideSwitch() {
            var $active = $('#' + id + ' #slide_image.active');

            if ($active.length === 0) $active = $('#' + id + ' #slide_image:last');

            var $next = $active.next().length ? $active.next() : $('#' + id + ' #slide_image:first');

            $active.addClass('last-active');

            $next.css({
                opacity: 0.0
            })
                .addClass('active')
                .animate({
                opacity: 1.0
            }, 1000, function () {
                $active.removeClass('active last-active');
            });
        }

        $(function () {
            setInterval(slideSwitch, 3000);
        });
       i++;
    }



    function addSlider() {    
        buildslider('i', 'draggable', '<div id="slideshow"><img id="slide_image" src="http://jonraasch.com/img/slideshow/mini-golf-ball.jpg" class="active" /><img id="slide_image"  src="http://jonraasch.com/img/slideshow/jon-raasch.jpg" /><img id="slide_image" src="http://jonraasch.com/img/slideshow/ear-cleaning.jpg" /></div>');
    }

HTML

<input type='button' value='add slider' id='addSlider' onclick='addSlider();'>

Answer 1

首先要做的事情是：在处理添加动态创建的未知数量元素时，尽量使用类而不是ID，因为它们更具有可塑性，并且在多个元素上使用相同的ID是无效的HTML， don不要这样做。

在将所有ID切换到类之后，我注意到新的幻灯片已经绝对定位，这也应该通过动态创建未知数字的元素来避免。结果，我代之以浮动容器，并使用clear:both确保它们没有重叠。

最初我刚删除了buildslider函数的一大块，但最终我选择完全删除它，因为你可以在一行中执行函数所做的操作。我还删除了一个容器div，除了给出尺寸之外什么也没做，只选择把它放到CSS中。

对于jQuery本身的更改，一旦元素被赋予适当的类，它就相对简单了。最大的变化是我将setInterval移到slideSwitch函数之外以防止它相互重叠，添加了一个参数（父对象）以允许从不同的起始/转换点运行多个幻灯片，并选择了主要是基于CSS transition: opacity 1s;与jQuery的.css相比jQuery .animate的性能和易于编辑的原因。您无需转到每个.animate并更改动画持续时间，只需更改过渡的1s即可将其应用于所有动画

正如您在评论中发布的粗略演示中所看到的那样，在一次转换中出现了故障，第一张幻灯片加载速度很慢。第一个问题是由于从上一张幻灯片到第一张幻灯片的过渡中出现了一些重叠问题，并通过将.animates更改为.css并添加前面提到的CSS过渡来解决。第二个问题是由于默认情况下没有active类，所以我只是将类添加到附加HTML中的第一个img中。但是，这使它立即出现，所以我在添加.animate之后添加了/* HTML */ <input type='button' value='Add Slider' onclick='addSlider()'> <div id="content"></div> /* CSS */ #content { overflow:hidden; } .slideshow { float:left; clear:both; position:relative; width:270px; height:350px; } .slideshow img { position:absolute; width:320px; height:270px; top:0; left:0; z-index:8; opacity:0.0; transition: opacity 1s; } .slideshow img.active { z-index:10; } .sdeshow img.last-active { z-index:9; } /* Javascript/jQuery */ var i = 0; function slideSwitch($container) { var $active = $container.find('.slide_image.active'); if ($active.length === 0) { $active = $container.find('.slide_image:last'); } var $next = $active.next().length ? $active.next() : $container.find('.slide_image:first'); $active.addClass('last-active').removeClass('active').css({ opacity: 0 }); $next.addClass('active') .css({ opacity: 1.0 }, function () { $active.removeClass('last-active'); }); } function addSlider() { $('#content').append('<div class="slideshow"><img class="slide_image active" src="http://jonraasch.com/img/slideshow/mini-golf-ball.jpg" class="active" /><img class="slide_image" src="http://jonraasch.com/img/slideshow/jon-raasch.jpg" /><img class="slide_image" src="http://jonraasch.com/img/slideshow/ear-cleaning.jpg" /></div>'); var $addedElem = $('.slideshow:eq(' + i + ')'); $addedElem.find('.active').animate({ opacity: 1 }); setInterval(function() { slideSwitch($addedElem) }, 3000); i++; }，这样我就不用担心setInterval的迭代了

这是完整的代码

{{1}}

Full demo here

如果您对我的代码有任何疑问，请与我们联系

在一个页面上多个动态创建的jquery滑块库

1 个答案: