0

嗨，我希望有人能帮我解决这个问题我正在使用以下块来显示图像和文本作为推荐，我希望能够有 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>

有什么建议么

4

2 回答 2

0

首先将所有推荐设置为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);
于 2013-11-07T13:23:55.013 回答
0

如果您的内容是静态的，请使用id=article1toid=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>
于 2013-11-07T12:43:15.993 回答