Question

我添加了一些由jQuery fliptext和lettering库翻转的文本。我把它们放在滑块中，第一张幻灯片工作正常但是其他幻灯片有文字问题。怎么实现呢？这是我的链接 Here is working code

<!DOCTYPE html>
<html>

<head>
    <title>Find A Gamer</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.lettering.js" type="text/javascript"></script>
    <script src="js/eliptext.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
</head>

<body>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <div id="gc">
                    <span class="username">Game username</span>
                    <span class="level">Level: intermediate</span>
                    <span class="wager">Wager
            <span class="count">500</span>
                    <span class="blink_glare"></span>
                    </span>
                    <span class="sp">sp
            <span class="count">45%</span>
                    <span class="blink_glare"></span>
                    </span>
                    <a href="#" class="accept">accept</a>
                    <a class="decline" href="#myCarousel" role="button" data-slide="next">decline</a>

                    <span class="ring_1"></span>
                    <span class="tickers"></span>
                    <figure class="user">
                        <img src="images/user.jpg" alt="">
                    </figure>

                </div>
            </div>

            <div class="item">
                <div id="gc">
                    <span class="username">Game username</span>
                    <span class="level">Level: intermediate</span>
                    <span class="wager">Wager
            <span class="count">500</span>
                    <span class="blink_glare"></span>
                    </span>
                    <span class="sp">sp
            <span class="count">45%</span>
                    <span class="blink_glare"></span>
                    </span>
                    <a href="#" class="accept">accept</a>
                    <a class="decline" href="#myCarousel" role="button" data-slide="next">decline</a>

                    <span class="ring_1"></span>
                    <span class="tickers"></span>
                    <figure class="user">
                        <img src="images/user.jpg" alt="">
                    </figure>

                </div>
            </div>

            <div class="item">
                <div id="gc">
                    <span class="username">Game username</span>
                    <span class="level">Level: intermediate</span>
                    <span class="wager">Wager
            <span class="count">500</span>
                    <span class="blink_glare"></span>
                    </span>
                    <span class="sp">sp
            <span class="count">45%</span>
                    <span class="blink_glare"></span>
                    </span>
                    <a href="#" class="accept">accept</a>
                    <a class="decline" href="#myCarousel" role="button" data-slide="next">decline</a>

                    <span class="ring_1"></span>
                    <span class="tickers"></span>
                    <figure class="user">
                        <img src="images/user.jpg" alt="">
                    </figure>

                </div>
            </div>

            <div class="item">
                <div id="gc">
                    <span class="username">Game username</span>
                    <span class="level">Level: intermediate</span>
                    <span class="wager">Wager
            <span class="count">500</span>
                    <span class="blink_glare"></span>
                    </span>
                    <span class="sp">sp
            <span class="count">45%</span>
                    <span class="blink_glare"></span>
                    </span>
                    <a href="#" class="accept">accept</a>
                    <a class="decline" href="#myCarousel" role="button" data-slide="next">decline</a>

                    <span class="ring_1"></span>
                    <span class="tickers"></span>
                    <figure class="user">
                        <img src="images/user.jpg" alt="">
                    </figure>

                </div>
            </div>
        </div>
    </div>


    <script>
        $('.carousel').carousel({
            interval: false
        })
    </script>

</body>

</html>

Answer 1

问题是您没有为其他幻灯片调用elip功能。最初只能看到一张幻灯片，elipText使用元素尺寸来计算字母位置。

滑动切换时可以调用此函数：

$('.carousel').on('slid.bs.carousel', function () {
    elip();
});

jQuery文本翻转不正常工作

1 个答案: