Question

我有：

    var t_out;
    var idx = 0;

    function cycleReviews() {
        clearTimeout(t_out);
        t_out = setTimeout(function () {
            console.log(idx)
            $('#review_' + idx).animate({opacity: '0'}, function () {
                $('#review_' + idx).addClass('hide');

                $('#review_'+ (idx+1)).css('opacity', '0.0').removeClass('hide').animate({opacity: '1.0'});
                idx++;
            });
            if(idx == 2) {
                console.log('reload')
                idx = -1;
            }
            cycleReviews();
        }, 2000);
    }

循环通过三个div，将它们逐渐淡化。

我无法正常工作，关于它何时重启（返回第一张幻灯片，idx 0）。

如何让它正常工作？

小提琴：

＆＃13;

'use strict';

var obj = [{'id': 0, 'review': 'Test1', 'author': 'Bob1'},{'id': 1, 'review': 'Test2', 'author': 'Bob2'},{'id': 2, 'review': 'Test3', 'author': 'Bob3'}];

$(function () {
            var html = '';
            var first = true;
            $.each(obj, function (i, v) {        
                html += '<div id="review_' + i + '" class="review ' + (first ? '' : 'hide') + '">';
                html += '<p>' + v.review + '</p>';
                html += '<p class="small">' + v.author + '</p>';
                html += '</div>';
                first = false;
            })
            $('#review_container').html(html);
            cycleReviews();

    var t_out;
    var idx = 0;

    function cycleReviews() {
        clearTimeout(t_out);
        t_out = setTimeout(function () {
            console.log(idx)
            $('#review_' + idx).animate({opacity: '0'}, function () {
                $('#review_' + idx).addClass('hide');

                $('#review_'+ (idx+1)).css('opacity', '0.0').removeClass('hide').animate({opacity: '1.0'});
                idx++;
                if(idx == 2) {
                    console.log('reload')
                    idx = 0;
                }
                cycleReviews();
            });


        }, 2000);
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container text-center home-2">
                    <h1 class="hero">Customer Reviews</h1>
                    <div class="bullets"><span id="bullet_1">&#8226;</span> <span id="bullet_2">&#9702;</span> <span id="bullet_3">&#9702;</span></div>
                    <div id="review_container">
                    </div>
                    <p class="green">A happy client</p>
                </div>

＆＃13;

Answer 1

你在那里过度复杂化了一些事情。我对您的代码稍作修改 - 将索引添加为循环参数，更改它以便您不必查找以前的元素来隐藏它，但隐藏所有元素并仅显示索引一，删除硬编码的元素数量等。这是：

＆＃13;

cycleReviews

＆＃13;

'use strict';

var obj = [{'id': 0, 'review': 'Test1', 'author': 'Bob1'},{'id': 1, 'review': 'Test2', 'author': 'Bob2'},{'id': 2, 'review': 'Test3', 'author': 'Bob3'}];

$(function () {
            var html = '';
            var first = true;
            $.each(obj, function (i, v) {        
                html += '<div id="review_' + i + '" class="review ' + (first ? '' : 'hide') + '">';
                html += '<p>' + v.review + '</p>';
                html += '<p class="small">' + v.author + '</p>';
                html += '</div>';
                first = false;
            })
            $('#review_container').html(html);
            cycleReviews(0);

    function cycleReviews(idx) {
            $('.review').addClass('hide');
            setTimeout(function(){
              $('#review_'+ idx).removeClass('hide');
              setTimeout(function(){
                  cycleReviews((idx+1) % obj.length);
              }, 1500);
            }, 500);

    }
});

＆＃13;

注意，当然，这可以进一步改进，但这会让你开始。

我如何编写.review {opacity: 1; transition: opacity 0.5s linear} .hide {opacity: 0}函数：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container text-center home-2">
                    <h1 class="hero">Customer Reviews</h1>
                    <div class="bullets"><span id="bullet_1">&#8226;</span> <span id="bullet_2">&#9702;</span> <span id="bullet_3">&#9702;</span></div>
                    <div id="review_container">
                    </div>
                    <p class="green">A happy client</p>
                </div>

＆＃13;

NULL

＆＃13;

int

＆＃13;

Answer 2

我喜欢它干净，没有无用的ID 和东西，
可点击（并自动生成）项目符号
甚至在悬停时暂停：

var obj = [{'id': 0, 'review': 'Test1', 'author': 'Bob1'},{'id': 1, 'review': 'Test2', 'author': 'Bob2'},{'id': 2, 'review': 'Test3', 'author': 'Bob3'}];

$(function () {

  var $reviewsContainer = $('#review_container'),
      $bulletsContainer = $('.bullets'),
      idx = 0,
      slides = "",
      bullets = "",
      itv;

  $.each(obj, function (i, v) {        
    slides  += '<div><p>'+ v.review +'</p><p class="small">'+ v.author +'</p></div>';
    bullets += '<span></span>';
  });

  $reviewsContainer.append(slides);
  $bulletsContainer.append(bullets);

  slides  = $reviewsContainer.find("> div");
  bullets = $bulletsContainer.find("> span").on("click", function(){
              idx = $(this).index();
              showSlideIdx();
            });

  function showSlideIdx() {
    slides.removeClass("active").eq(idx).addClass("active");
    bullets.removeClass("active").eq(idx).addClass("active");
    idx = ++idx % obj.length;
  }

  function play() { itv = setInterval(showSlideIdx, 2000);}
  function stop() { clearInterval( itv ); }

  $(".container").hover(stop, play);
  showSlideIdx(); // the first ones
  play();         // START!

});

#review_container{
  position:relative;
  height:100px;
}
#review_container > div{
  position:absolute;
  visibility: hidden;
  opacity:0;
  transition: 0.8s;
  -webkit-transition: 0.8s;
}
#review_container > div.active{
  visibility: visible;
  opacity:1;
}
.bullets span{ font-size:50px; cursor:pointer; }
.bullets span.active:after{content: "•";}
.bullets span:after       {content: "◦";}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container text-center home-2">
  <div class="bullets"></div>
  <div id="review_container"></div>
  <p class="green">Hover to pause!</p>
</div>

简单的褪色Div与JS

2 个答案: