多组jQuery文本旋转器不能正常工作。

Question

我修改了我在这里找到的几个脚本想法，以旋转或翻转几个文本块（这样访问者就不必滚动）并在用户徘徊时暂停这些。但是，我试图设置它，以便在同一视图中有三个不同的旋转文本组（块或div）。我已经为每个组分配了不同的ID，但我不太清楚如何将这种级别的行为添加到脚本中，以便它们可以同时进行。我创建了一个jsfiddle来显示代码的基础...因为你会看到只有第一组（Joan）实际显示文本翻转，另外两个（Shelly，Valerie）只是坐在那里空白。在javascript中是否有一个简单的修复程序可以使它们三个同时工作？ multi-group text rotation 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>