多组 jQuery 文本旋转器不太工作。

Question

我修改了在 SO 上找到的几个脚本创意，以旋转或翻转几个文本块（因此访问者不必滚动）并在用户悬停时暂停这些文本。但是，我正在尝试对其进行设置，以便在同一视图中存在三个不同的旋转文本组（块或 div）。我已经为每个组分配了不同的 ID，但我不太确定如何将这种行为级别添加到脚本中，以便它们同时进行。我创建了一个 jsfiddle 来展示代码的基础知识……因为您只会看到第一组 (Joan) 实际上显示文本翻转，另外两个 (Shelly、Valerie) 只是空白。 javascript 中是否有一个简单的修复程序可以使它们三个同时工作？多组文本旋转jsfiddle

    function slideSwitch() {
var $active = $('.fadein quote.active');
if ($active.length == 0) $active = $('.fadein quote:last');
var $next = $active.next().length ? $active.next() : $('.fadein quote:first');

$active.addClass('last-active');

$next.css({
    opacity: 0.0
})
    .addClass('active')
    .animate({
    opacity: 1.0
}, 1000, function () {
    $active.removeClass('active last-active');
});
}

$(function () {
    var interval = setInterval(slideSwitch, 4000);

    $('.fadein').hover(function () {
        clearInterval(interval);
    }, function () {
        interval = setInterval(slideSwitch, 4000);
    });

});

Answer 1

要实现这一点，您必须从面向对象编程的角度进行思考。请参阅 some documentation 了解更多信息。

看看这段代码。它让卷轴对每个人起作用。

var Person = function(id) {
 this.id = id;
};

Person.prototype.slideSwitch = function(id) {

 let counter = 1;

 function getNext(){

  //identify last active
  var lastActiveCounter = counter;
  $(id+ " quote:nth-child("+lastActiveCounter+")").addClass('last-active');

  //increase counter or reset it to 1
  counter++;
  if (counter > $(id).children('quote').length) {
   counter=1;
  }
  //make changes to next active (since counter has changed)
  $(id+" quote:nth-child("+counter+")").css({
          opacity: 0.0
      })
          .addClass('active')
          .animate({
          opacity: 1.0
      }, 1000, function () {
          $(id+ " quote:nth-child("+lastActiveCounter+")").removeClass('active last-active');
      });
  }

 return getNext;
};

Person.prototype.start = function () {
    this.interval = setInterval(this.slideSwitch(this.id), 4000);
};

Person.prototype.clear = function(id) {
 clearInterval(this.interval);
}

$('.fadein').hover(function(){

 let id=$(this).attr("id");
 switch (id) {
  case "Valerie" :
   Valerie.clear();
   break;
  case "Joan" :
   Joan.clear();
   break;
  case "Shelly":
   Shelly.clear();
   break;
 }
}, function(){
 let id=$(this).attr("id");
 switch (id) {
  case "Valerie" :
   Valerie.start();
   break;
  case "Joan" :
   Joan.start();
   break;
  case "Shelly":
   Shelly.start();
   break;
 }
});


var Valerie = new Person("#Valerie");
var Joan = new Person("#Joan");
var Shelly = new Person("#Shelly");

Valerie.start();
Joan.start();
Shelly.start();

.fadein {
    height: 150px;
    position: relative;
    width: 100%; /*temp*/
    float:left;
}

div quote {
  text-align: left;
    background-color: white;
    left: 0;
    opacity: 0.0;
    position: absolute;
    height: inherit;
    width: 100%;
    top: 0;
    z-index: 8;
    overflow: hidden;
}

caption {
  text-align: left;
    background-color: white;
    left: 0;
    opacity: 0.0;
    position: absolute;
    height: inherit;
    width: 100%;
    top: 0;
    z-index: 8;
    overflow: hidden;
}

div quote.active {
    opacity: 1.0;
    z-index:10;
}
div quote.last-active {
    z-index: 9;
}

<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>

<h3><i>Our&nbsp;Clients&nbsp;Love&nbsp;Joan!</i></h3>
<div class="fadein" id="Joan">
  <quote   style="font-size:16pt;">&quot;Because Joan is nice!&quot;</quote>
  <quote   style="font-size:16pt;">&quot;Because Joan is smart!&quot;</quote>
  <quote   style="font-size:16pt;">&quot;Because Joan attends to the details!&quot;</quote>
</div>

<h3><i>Our&nbsp;Clients&nbsp;Love&nbsp;Shelly!</i></h3>
<div class="fadein" id="Shelly">
  <quote   style="font-size:16pt;">&quot;Because Shelly is no-nonsense!&quot;</quote>
  <quote   style="font-size:16pt;">&quot;Because Shelly is does quit!&quot;</quote>
  <quote   style="font-size:16pt;">&quot;Because Shelly is on their side!&quot;</quote>
</div>

<h3><i>Our&nbsp;Clients&nbsp;Love&nbsp;Valerie!</i></h3>
<div class="fadein" id="Valerie">
  <quote   style="font-size:16pt;">&quot;Because Valerie listens!&quot;</quote>
  <quote   style="font-size:16pt;">&quot;Because Valerie is tireless!&quot;</quote>
  <quote   style="font-size:16pt;">&quot;Because Valerie gets it done!&quot;</quote>
</div>

多组 jQuery 文本旋转器不太工作。

Multi-Group jQuery text rotator not quite working.

javascript

jquery

text-rotation

fadein