javascript - 用于旋转木马的 Jquery 函数循环(flowtext)

Question

我有一个问题。我有一个旋转木马，上面有很多图片和文字。为了使文本响应，我使用了一个名为 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>


}

附上图片。第一个工作正常。第二个不调整大小。

First Picture Carousel

Second Picture Carousel

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

虽然不再按预期工作。即使在正常尺寸(桌面)中，它现在也非常小。除了第一张幻灯片。

有什么帮助吗？

New Image

New Image second

Answer 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>