Question

我正在尝试创建自动文本更改（诸如ont click and scroll down please to see changing testimonials之类的推荐信

                    <div class="col-sm-12">
                        <a href="clients">
                            <div class="box">
                                <p>Testimonial 1</p>
                            </div>
                            <div class="author">Pete</div>
                        </a>
                    </div>
                    <div class="col-sm-12">
                        <a href="clients">
                            <div class="box">
                                <p>Testimonial 2</p>
                            </div>
                            <div class="author">Fiona</div>
                        </a>
                    </div>
                    <div class="col-sm-12">
                        <a href="clients">
                            <div class="box">
                                <p>Testimonial 3</p>
                            </div>
                            <div class="author">Helen</div>
                        </a>
                    </div>
                    <div class="col-sm-12">
                        <a href="clients">
                            <div class="box">
                                <p>Testimonial 4</p>
                            </div>
                            <div class="author">Laura</div>
                        </a>
                    </div>

我需要每个证明书显示几秒钟，然后更改为另一个，因此一次只显示一个。我不是一个好的程序员，并试图在Google上找到它，但我没有。谢谢您的帮助。

Answer 1

尝试一下

                <div class="testimonial">
                    <a href="clients">
                        <div class="box">
                            <p>Testimonial 1</p>
                        </div>
                        <div class="author">Pete</div>
                    </a>
                </div>
                <div class="testimonial">
                    <a href="clients">
                        <div class="box">
                            <p>Testimonial 2</p>
                        </div>
                        <div class="author">Fiona</div>
                    </a>
                </div>
                <div class="testimonial">
                    <a href="clients">
                        <div class="box">
                            <p>Testimonial 3</p>
                        </div>
                        <div class="author">Helen</div>
                    </a>
                </div>
                <div class="testimonial">
                    <a href="clients">
                        <div class="box">
                            <p>Testimonial 4</p>
                        </div>
                        <div class="author">Laura</div>
                    </a>
                </div>

和jquery：

var divs = $('div[class^="testimonial"]').hide(),
i = 0;

(function cycle() { 

divs.eq(i).fadeIn(400)
          .delay(1000)
          .fadeOut(400, cycle);

i = ++i % divs.length;

})();

>> working example <<

循环文字更改

1 个答案: