用于轮播的 Jquery 函数循环（flowtext）答案

【问题标题】：Jquery function looping (flowtext) for carousel用于轮播的 Jquery 函数循环（flowtext）
【发布时间】：2017-11-02 15:16:30
【问题描述】：

我有一个问题。我有一个带有许多图像和文字的旋转木马。为了使文本具有响应性，我使用了一个名为 FlowText 的脚本。它在第一个轮播图像（活动图像）上完美运行，但一旦移动，它就不会。我怀疑它是因为......它只运行一次，当你移动旋转木马时它不再运行了。你将如何真正做到这一点，以便每次移动轮播时它都能正常工作。

<div id="imageCarousel3" class="carousel slide" data-interval="2000"
 data-ride="carousel" data-pause="hover" data-wrap="true">

 <ol class="carousel-indicators">
 <li data-target="#imageCarousel3" data-slide-to="0" class="active"></li>
 <li data-target="#imageCarousel3" data-slide-to="1"></li>
 <li data-target="#imageCarousel3" data-slide-to="2"></li>
 <li data-target="#imageCarousel3" data-slide-to="3"></li>
 <li data-target="#imageCarousel3" data-slide-to="4"></li>
 <li data-target="#imageCarousel3" data-slide-to="5"></li>
 <li data-target="#imageCarousel3" data-slide-to="6"></li>
 <li data-target="#imageCarousel3" data-slide-to="7"></li>
 <li data-target="#imageCarousel3" data-slide-to="8"></li>
 <li data-target="#imageCarousel3" data-slide-to="9"></li>
 <li data-target="#imageCarousel3" data-slide-to="10"></li>
 <li data-target="#imageCarousel3" data-slide-to="11"></li>
 <li data-target="#imageCarousel3" data-slide-to="12"></li>
 <li data-target="#imageCarousel3" data-slide-to="13"></li>
 <li data-target="#imageCarousel3" data-slide-to="14"></li>
 </ol>


<div class="carousel-inner" style=" max-width: 946px;  overflow: hidden; margin:0 auto;">

    <div class="item active" ;">
        <img src="/Content/Images/Slide21.jpg" class="img-responsive">
        <div id="flowtext1"  style="width: 50%; height:100%; top:0px; right:0px; position:absolute; background-color:rgba(0, 0, 0, 0.75); ">
            <div class="carousel-caption"  style="top:0%; position:absolute;">
                <p style="font-family:'Open Sans Light'; font-size:1.9em; text-align:center; left:20%;"><strong>DSM e-FRE</strong></p>
                <p style="font-family:'Open Sans Light';font-size:1.5em; text-align :center;"><strong>Freight Management Systems</strong></p>
            </div>
                <div class="carousel-caption" style="top:30%; left: 10%; position:absolute;">
                    <ul style="text-align:left; left:0%;">
                        <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>NVOCC</strong><br /><br /></li>
                        <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Freight Consolidation</strong><br /><br /></li>
                        <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Staff Transparency</strong><br /><br /></li>
                        <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>No Missed Billings</strong></li>
                    </ul>
                </div>
        </div>

    </div>

    <div class="item">
        <img src="~/Content/Images/Slide22.jpg" class="img-responsive">
        <div id="flowtext1" style="width: 50%; height:100%; top:0px; right:0px; position:absolute; background-color:rgba(0, 0, 0, 0.75); ">
            <div class="carousel-caption" style="top:0%; position:absolute;">
                <p style="font-family:'Open Sans Light'; font-size:1.9em; text-align:center; left:20%;"><strong>DSM e-HMS</strong></p>
                <p style="font-family:'Open Sans Light';font-size:1.4em; text-align :center;"><strong>Haulage Management Systems</strong></p>
            </div>
            <div class="carousel-caption" style="top:30%; left:10%; position:absolute;">
                <ul style="text-align:left;">
                    <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Haulage Movement Optimization & Advanced Electronic Planning</strong><br /><br /></li>
                    <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Map Interface and Telemetrics</strong><br /><br /></li>
                    <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>e-HR (Driver Payroll Auto-Calc)</strong><br /><br /></li>
                    <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Trailer Audit and Control</strong></li>
                </ul>
            </div>
        </div>
    </div>

对于脚本部分

 @section scripts{
    <script src="~/Scripts/jquery.fittext.js"></script>
    <script src="~/Scripts/flowtype.js"></script>

    <script type="text/javascript">
        $("#flowtext1").flowtype();

    </script>

    <script type="text/javascript">
        $("#fittext1").fitText();
        $("#fittext2").fitText(1.2);
        $("#fittext3").fitText(1.1, { minFontSize: '10px', maxFontSize: '75px' });
    </script>


}

这里是附上的图片。第一个工作正常。 2nd 不会调整大小。

First Picture Carousel

Second Picture Carousel

编辑：按照建议从 id 更改为 class。

虽然不再按预期工作。即使是正常尺寸（桌面），它现在也超级小。除了第一张幻灯片。

有什么帮助吗？

New Image

New Image second

【问题讨论】：

您有 2 个元素具有相同的 ID(flowtext1)，这是错误的。在那里使用类
啊，我明白了。谢谢。我编辑了我的帖子，仍然有一个小问题。你知道会发生什么吗？
我尝试给他们每个人一个不同的ID，但这并没有解决问题。

标签： javascript jquery css asp.net-mvc-4 bootstrap-4

【解决方案1】：

问题是您有两个具有相同 ID 的元素。使用 jQuery ID 选择器 -> $("#something").... 返回具有该 ID 的第一个元素，因为它假定它应该是唯一的。解决问题的一种方法是使用class 而不是id。

HTML：

<div class="item active" ;">
        <img src="/Content/Images/Slide21.jpg" class="img-responsive">
        <div class="flowtext"  style="width: 50%; height:100%; top:0px; right:0px; position:absolute; background-color:rgba(0, 0, 0, 0.75); ">
            <div class="carousel-caption"  style="top:0%; position:absolute;">
                <p style="font-family:'Open Sans Light'; font-size:1.9em; text-align:center; left:20%;"><strong>DSM e-FRE</strong></p>
                <p style="font-family:'Open Sans Light';font-size:1.5em; text-align :center;"><strong>Freight Management Systems</strong></p>
            </div>
                <div class="carousel-caption" style="top:30%; left: 10%; position:absolute;">
                    <ul style="text-align:left; left:0%;">
                        <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>NVOCC</strong><br /><br /></li>
                        <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Freight Consolidation</strong><br /><br /></li>
                        <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Staff Transparency</strong><br /><br /></li>
                        <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>No Missed Billings</strong></li>
                    </ul>
                </div>
        </div>

    </div>

    <div class="item">
        <img src="~/Content/Images/Slide22.jpg" class="img-responsive">
        <div class="flowtext" style="width: 50%; height:100%; top:0px; right:0px; position:absolute; background-color:rgba(0, 0, 0, 0.75); ">
            <div class="carousel-caption" style="top:0%; position:absolute;">
                <p style="font-family:'Open Sans Light'; font-size:1.9em; text-align:center; left:20%;"><strong>DSM e-HMS</strong></p>
                <p style="font-family:'Open Sans Light';font-size:1.4em; text-align :center;"><strong>Haulage Management Systems</strong></p>
            </div>
            <div class="carousel-caption" style="top:30%; left:10%; position:absolute;">
                <ul style="text-align:left;">
                    <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Haulage Movement Optimization & Advanced Electronic Planning</strong><br /><br /></li>
                    <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Map Interface and Telemetrics</strong><br /><br /></li>
                    <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>e-HR (Driver Payroll Auto-Calc)</strong><br /><br /></li>
                    <li style="font-family:'Open Sans Light';font-size:1.2em; text-align:left;"><strong>Trailer Audit and Control</strong></li>
                </ul>
            </div>
        </div>
    </div>

JS：

 <script type="text/javascript">
        $(".flowtext").flowtype();
 </script>

【讨论】：

你好。谢谢，我将 id 更改为 class 但......现在它并没有真正按预期工作。我编辑了我的帖子

【解决方案2】：

我找到了一种循环特定脚本的方法。

<script>
            $(document).ready(function () {
                var intervalFunction = setInterval(function () {
                    $(".flowtext1").flowtype();
                }, 500);
            });
</script>

这将每 0.5 秒循环一次所说的 jscript 流类型。因此，当滑动到新幻灯片时，它只会调整文本大小。

【讨论】：