将子弹导航添加到我的内容滑块

时间:2014-05-23 09:02:14

标签: javascript jquery html

我有简单的列表编号滑块,具有淡入淡出效果。我需要添加项目符号导航来控制滑块。请帮我这样做。

jsFiddle Demo

这是我的代码:

<!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>Slider</title>

    <style id="jsbin-css">
        .testimonials .quote {
            display: none;
        }
    </style>
    </head>
    <body>
        <div class="testimonials">
            <div class="quote">1</div>
            <div class="quote">2</div>
            <div class="quote">3</div>
            <div class="quote">4</div>
            <div class="quote">5</div>
            <div class="quote">6</div>
            <div class="quote">7</div>
            <div class="quote">8</div>
            <div class="quote">9</div>
            <div class="quote">10</div>
        </div>
        <script>
        $(function () {
            (function anim(num, delay) {
               $('.testimonials .quote')
                   .slice(0,num)
                   .fadeIn()
                   .delay(delay)
                   .fadeOut()
                   .promise()
                   .done(function () {
                       $('.testimonials').append(this);
                       anim(num, delay);
                   });
            }(2, 2000));
        });
        </script>

    </body>
</html>

0 个答案:

没有答案