Question

嗨，我希望有人可以帮助我，我正在使用下面的块来显示图像和文本作为推荐，我希望能够有6个推荐，两个显示x秒，然后显示下一个2和为此继续循环。以下代码在页面上并排显示两个推荐。

 <article class="span6 pe-bg-one pad-common">
                    <div class="row-fluid">
                      <article class="span3"> <img src="images/people/01.jpg" title="" alt=""/> </article>
                      <article class="span9">
                        <p>some text here</p>
                        <h5>Noname</h5>
                        <h6 class="testimonial-alt">Something</h6>
                      </article>
                    </div>
                  </article>
                  <article class="span6 pe-bg-two pad-common">
                    <div class="row-fluid">
                      <article class="span3"> <img src="images/people/02.jpg" title="" alt=""/> </article>
                      <article class="span9">
                        <p>some text here</p>
                        <h5>Anonymus</h5>
                        <h6 class="testimonial-alt">Awesome Ltd.</h6>
                      </article>
                    </div>
                  </article>

是否有可能实现这一目标我希望有些JavaScript或jquery可以让我创建所需的效果，但我在编写脚本方面的知识有限

任何帮助表示赞赏

好的，经过一点点的修补我现在正在使用

    var divs = $('div[id^="no-"]').hide(),

    i = 0;

(function cycle() { 

    divs.eq(i).fadeIn(600)
              .delay(3000)
              .fadeOut(600, cycle);

    i = ++i % divs.length;

})();

我在每个部分添加了一个div，就像这样

<div id="no-1">   
                            <div class="row-fluid">

                  <article class="span6 pe-bg-one pad-common">
                    <div class="row-fluid">
                      <article class="span3"> <img src="images/people/01.jpg" title="" alt=""/> </article>
                      <article class="span9">
                        <p></p>
                        <h5>Noname</h5>
                        <h6 class="testimonial-alt">Something</h6>
                      </article>
                    </div>
                  </article>
                  <article class="span6 pe-bg-two pad-common">
                    <div class="row-fluid">
                      <article class="span3"> <img src="images/people/02.jpg" title="" alt=""/> </article>
                      <article class="span9">
                        <p></p>
                        <h5>Anonymus</h5>
                        <h6 class="testimonial-alt">Awesome Ltd.</h6>
                      </article>
                    </div>
                  </article>
                </div>

然而，这条线是彩色背景，我想保持固定，只有图像和文字发生变化<article class="span6 pe-bg-two pad-common">

我试图只让图像和文本循环，即这段代码

<article class="span3"> <img src="images/people/02.jpg" title="" alt=""/> </article>
                      <article class="span9">
                        <p></p>
                        <h5>Anonymus</h5>
                        <h6 class="testimonial-alt">Awesome Ltd.</h6>
                      </article>

任何建议

Answer 1

如果您的内容是静态内容，请添加id=article1至id=article6和style="display:none"

的所有推荐

例如

<article class="span6 pe-bg-one pad-common" id="article1" style="display:none">..</article>
<article class="span6 pe-bg-two pad-common" id="article2" style="display:none">..</article>
..
<article class="span6 pe-bg-two pad-common" id="article6" style="display:none">..</article>

然后添加使用setInterval()的脚本每2秒运行一次功能并显示两个推荐

<script>
    var totalCount = 6; 
    var currentId = -1;

    function rotate() {
        //hide previous
        if(document.getElementById('article' + currentId) != undefined) {
            document.getElementById('article' + currentId).style.display = "none";
            document.getElementById('article' + (currentId + 1)).style.display = "none";
        }

        currentId += 2;
        if (currentId >= totalCount) currentId = 1;

        //show current
        document.getElementById('article' + currentId).style.display = "block"; 
        document.getElementById('article' + (currentId + 1)).style.display = "block";                   
    }

    setInterval(rotate, 2000);
</script>

Answer 2

首先将您的所有推荐设置为display:none。然后使用setInterval()循环显示/隐藏推荐。

这是一种使用each()函数的jQuery方法：

var testimonials = //YOUR TESTIMONIALS SELECTOR
var len = $(testimonials).length;
var count = 2;
var start = -1
var current = start;

setInterval(function(){
    if(current >= len - 1){
        current = start; //restart the loop
    }

    $(testimonials).each(function(index, element){
        if(index > current && index <= current + count){
            $(this).show();
        }else{
            $(this).hide();
        }
    });

   current += count;

}, 2000);

如何显示不同的图像和文本，如滚动的推荐

2 个答案: