将时间线添加到引导程序旋转木马

Add timeline to Bootstrap Carousel

本文关键字：引导程序 旋转木马 添加 时间线      更新时间：2023-09-26

我想知道是否有办法将脚本添加到Bootstrap的旋转木马中，这样它就可以在时间轴内显示图像。比如说，我希望在3月5日到3月11日之间显示一张图像，该图像应该会消失。我已经可以用其他幻灯片来做到这一点，比如pikachoose，但我找不到用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>

但我还没能适应旋转木马谢谢

我能够更改代码并使其正常工作。然而，在图像应该被隐藏的那一刻，这会隐藏整个幻灯片。

<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>
相关文章：