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

Question

我修改了我在SO上找到的几个脚本想法，以旋转或翻阅几个文本块(因此访问者不必滚动(并在用户悬停时暂停这些。 但是，我正在尝试对其进行设置，以便在同一视图中有三个不同的旋转文本组(块或div(。 我为每个组提供了一个不同的 ID，但我不太确定如何将这种行为级别添加到脚本中，以便它们同时进行。 我创建了一个 jsfiddle 来展示代码的基础知识......正如你会看到的，只有第一组(琼(实际上显示文本翻转，另外两组(雪莉、瓦莱丽(只是空白地坐在那里。 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

为此，您必须从面向对象编程的角度进行思考。请参阅一些文档以了解更多信息。

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

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>