Question

所以我是网络开发的新手。我试图将图像和容器的div放到一个数组中，允许我用（display：none）隐藏整个div，然后在第二个数组槽中显示另一个div（display：block）。我不确定这是怎么做的，但这是我到目前为止的尝试。

HTML：

<div class="container-fluid">
<div class="col-xs-1 col-xs-push-1 rightLeftChevrons">
    <a href="#" class="btn-xxl btn-color btn-block" id="leftControl" onclick=""><span class="glyphicon glyphicon-chevron-left center-block" aria-hidden="true"></span></a>
</div>
<div class="col-xs-10">
    <div class="container">
        <div class="row" id="imagesSlide">
            <div id="imagesTabsOne">
                <div class="col-xs-12">
                    <div class="well well-lg" id="imageWell">
                        <div class="row">
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="imagesTabsTwo">
                <div class="col-xs-12">
                    <div class="well well-lg" id="imageWell">
                        <div class="row">
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image2" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image2" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image2" alt="imagesImage">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image2" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image2" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image2" alt="imagesImage">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-xs-1 col-xs-pull-1 rightLeftChevrons" id="rightControl">
    <button class="btn-xxl btn-color btn-block" onclick="imagesTabSlide()"><span class="glyphicon glyphicon-chevron-right center-block" aria-hidden="true"></span></button>
</div>

使用Javascript：

var IS_i = 0;
var elem_IS = document.getElementById('imagesSlide');
var pageOne = document.getElementById('imagesTabsOne');
var pageTwo = document.getElementById('imagesTabsTwo');
var imagesTabsArray = [pageOne, pageTwo];

function imagesTabNext(){

    IS_i++;
    elem_IS.style.display = "none";
    if (IS_i > (imagesTabsArray.length -1)){
        IS_i = 0;
    }
    setTimeout('imagesTabSlide()',1000);
}

function imagesTabSlide(){

    elem_IS.innerHTML = imagesTabsArray[IS_i];
    elem_IS.style.display = "block";
    setTimeout('imagesTabNext()',2000);

}

目前，它仅设置为按下按钮激活以进行测试。

这一切几乎都有效，但我得到[对象HTMLDivElement]而不是我的div。

基本上我想用我创建的div块进行幻灯片放映。

Answer 1

innerHTML是一个字符串，您尝试分配给它的任何内容都将转换为字符串，这就是为什么你得到＆＃34; [object HTMLDivElement]＆＃34;。

相反，您可以使用appendChild：

将元素插入树中

    elem_IS.appendChild( imagesTabsArray[IS_i] );

但是，你可能想从那里删除其他元素，不是吗？为此，您可以：

    elem_IS.removeChild( elem_IS.firstChild );

此外，不要将字符串作为第一个参数传递给setTimeout：它会影响性能，还需要您的函数是全局的。改为传递函数：

    setTimeout( imagesTabNext, 2000 );

Answer 2

您需要使用innerHTML。这将从您创建的对象中检索div块。

elem_IS.innerHTML = imagesTabsArray[IS_i.innerHTML];

将整个Bootstrap 3 <div>放入Javascript数组</div>

2 个答案: