为Bootstrap Carousel添加时间线

时间:2015-03-04 21:15:37

标签: javascript html5 twitter-bootstrap carousel

我想知道是否有一种方法可以将脚本添加到Bootstrap的旋转木马中,因此它会在时间轴内显示图像。说,我希望在05年3月到3月11日之间显示图像,图像应该消失。我已经能够用其他幻灯片显示,例如pik​​achoose,但我无法通过Bootstrap的旋转木马找到一种方法。

我之前使用过的脚本就是这个                 

        $(document).ready(
            function (){

                //Users time
                var timeLocal = new Date();

                var AllImages = $(".item");

                var liEndDate;
                var imgEndDate;

                var liStartDate;
                var imgStartDate;

                var thisImg;

                for (var i = 0; i < AllImages.length; i++) {

                    thisImg = AllImages[i];

                    liEndDate = thisImg.getAttribute("endDate");
                    imgEndDate = new Date(liEndDate);

                    liStartDate = thisImg.getAttribute("startDate");
                    imgStartDate = new Date(liStartDate);

                    if (imgStartDate > timeLocal || imgEndDate < timeLocal || liEndDate == null || liStartDate == null ) { // si timeLocal es menor a TheNext, entonces haga esto.\

                        //document.write(AllImages[i].outerHTML);
                        $(thisImg).remove();

                    } else {

                        $(thisImg).show();
                    }

                });

    </script>

但我还没有能够适应旋转木马 感谢。

1 个答案:

答案 0 :(得分:0)

我能够改变代码并使其有效。但是,这隐藏了整个幻灯片,暂时隐藏了图像。

<script language="javascript">
        $(document).ready(
                function () {

                    //Users time
                    var timeLocal = new Date();

                    var AllImages = $(".item img");

                    var liEndDate;
                    var imgEndDate;

                    var liStartDate;
                    var imgStartDate;

                    var thisImg;

                    for (var i = 0; i < AllImages.length; i++) {

                        thisImg = AllImages[i];

                        liEndDate = thisImg.getAttribute("endDate");
                        imgEndDate = new Date(liEndDate);

                        liStartDate = thisImg.getAttribute("startDate");
                        imgStartDate = new Date(liStartDate);

                        if (imgStartDate > timeLocal || imgEndDate < timeLocal || liEndDate === null || liStartDate === null) { // si timeLocal es menor a TheNext, entonces haga esto.\

                            //document.write(AllImages[i].outerHTML);
                            $(thisImg).remove();

                        } else {

                            $(thisImg).show();
                        }

                    }
                });

    </script>