0

我正在尝试创建一个页面，用户可以通过单击按钮将 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;
    }

脚本

    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();'>
4

1 回答 1

1

第一件事是：在处理添加未知数量的动态创建元素时，尽量只使用类，而不是 ID，因为它们更具延展性，并且在多个元素上使用相同的 ID 是无效的 HTML，不要这样做。

在将所有 id 切换到类之后，我注意到新的幻灯片是绝对定位的，这也应该通过动态创建未知数量的元素来避免。结果，我改为浮动容器并clear:both确保它们不重叠。

最初我只是删除了你的大部分buildslider函数，​​但最终我只是选择完全删除它，因为你可以在一行中完成该函数所做的事情。我还删除了一个只提供尺寸的容器 div，而是选择将其放入 CSS 中。

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

正如您在我在评论中发布的粗略演示中看到的那样，一个过渡出现了故障，并且第一张幻灯片加载缓慢。第一个问题是由于从最后一张幻灯片到第一张幻灯片的过渡中的一些重叠问题，通过更改.animatesto.css并添加前面提到的 CSS 过渡来解决。第二个问题是由于默认情况下没有active类，所以我只是将类添加到附加 HTML 中的第一个 img 中。但是，这使它立即出现，所以我.animate在它被附加之后添加了一个，这样我就不必担心 setInterval 的迭代

这是完整的代码

/* 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++;
}

完整的演示在这里

如果您对我的代码有任何疑问，请告诉我

于 2013-08-26T15:03:33.177 回答