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

Question

我修改了一些我在此处找到的脚本想法，以旋转或翻转几个文本 block (这样访问者就不必滚动)并在用户悬停时暂停这些文本 block 。但是，我试图对其进行设置，以便在同一 View 中存在三个不同的旋转文本组( block 或 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

要实现这一点，您必须从面向对象编程的 Angular 进行思考。请参阅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>