javascript - 循环文本更改

Question

我正在尝试创建自动文本更改（请点击点击并向下滚动等推荐以查看更改的推荐

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

我需要每个推荐显示几秒钟，然后更改为另一个，因此一次只显示一个。我不是一个优秀的程序员，我试图在谷歌上找到这个，但我没有。谢谢你的帮助。

标签： javascriptjquery

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;

})();

>> 工作示例 <<