【Bug】使用content: document.querySelector('#id)超过2个之后就显示不正常了

[wayearn]

如： JS:

    var list = [
        {
            content: document.querySelector('#id')
        },
        {
            content: document.querySelector('#id1')
        },
        {
            content: document.querySelector('#id2')
        },
        {
            content: document.querySelector('#id3')
        },
        {
            content: document.querySelector('#id4')
        },
        {
            content: document.querySelector('#id5')
        },
];

JS:

new iSlider({
    dom: document.getElementById('iSlider-wrapper'),
    data: list,
    isAutoplay: 0,
    isLooping: 0,
    isOverspread: 1,
    animateTime: 800,
    isVertical: true
});

HTML:

<div id="iSlider-wrapper"></div>

[shinate]

显示问题？是否有截图或者可预览的地址

[zhiyi10]

是的，我也遇到了这个问题，全部用页面的节点作为content，超过2个之后，后面的节点会被绘制在islider-outer这个ul的外面（同一层级），导致页面显示不正常，多个元素重叠在一起了，需要轮播好几页之后才自动正常。我目前解决的办法是把和islider-outer同级层的被绘制的节点都display: none掉。感觉可能是个bug，希望能处理一下。

[shinate]

<div id="iSlider-wrapper"></div>
<div style="display: none">
    <img id="i_0" src="pic.jpg"/>
</div>
<div style="display: none">
    <img id="i_1" src="pic.jpg"/>
</div>
<div style="display: none">
    <img id="i_2" src="pic.jpg"/>
</div>
<div style="display: none">
    <img id="i_3" src="pic.jpg"/>
</div>
<div style="display: none">
    <img id="i_4" src="pic.jpg"/>
</div>

<script>
    var list = [];

    for (var i = 0; i < 5; i++)
        list.push({
            content: document.querySelector('#i_' + i)
        });

    new iSlider(document.querySelector("#iSlider-wrapper"), list, {
        isLooping: 0,
        isOverspread: 1,
        animateTime: 800,
        isVertical: true
    });
</script>

[shinate]

用选择器的方式其实并不会在一开始全部渲染的，只是在滑动到的情况下，才去页面中拿取需要的节点

[shinate]

比如上面的代码，只会在首屏读取0、1，滑动到1，继续读取2 ...