jQuery 两行文本幻灯片

Question

所以我需要做的是：制作一个文本幻灯片，在每个文本项之间做一个 alpha 淡入淡出。棘手的部分是让它在两行中进行，每行都与最后一行相反。顶部变化，等待，底部变化，等待，顶部变化等。这是文本布局，下面是我找到的一些代码。

静态 HEADER 此处为文本

此处为第一行文字

此处为第二行文字

此处有更多静态文本

HTML:

<div id="textslide">
    <p></p>
</div>

jQuery:

var quotes = new Array();

quotes[0] = "quote1";
quotes[1] = "quote2";
quotes[2] = "quote3";
quotes[3] = "quote4";
quotes[4] = "quote5";
console.log(quotes);
var counter = 0;

function loop() {
    if (counter > 4) counter = 0;
    $('#textslide p:first').text(quotes[counter]);
    counter++;
    console.log(counter);
    setTimeout(loop, 500);
}
loop();

JS Fiddle

Answer 1

也许这就是你想要的：

html:

<div id="textslide">
    <p></p>
    <p></p>
</div>

javascript:

var quotes = new Array();

quotes[0] = "You can do anything, but not everything";
quotes[1] = "Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away";
quotes[2] = "You miss 100 percent of the shots you never take";
quotes[3] = "You must be the change you wish to see in the world";
quotes[4] = "Always forgive your enemies; nothing annoys them so much";
quotes[5] = "Those who believe in telekinetics, raise my hand";

var counter = 0;

function loop() {

    if (counter > 5) counter = 0;
    $('#textslide p').eq(counter % 2).text(quotes[counter]);
    $('#textslide p').eq(counter % 2).fadeTo(500, 100).delay(1000);
    $('#textslide p').eq(counter % 2).fadeTo(500, 0);
    counter++;
    setTimeout(loop, 2000);
}
loop();

jsfiddle

var quotes = new Array();

quotes[0] = "You can do anything, but not everything";
quotes[1] = "Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away";
quotes[2] = "You miss 100 percent of the shots you never take";
quotes[3] = "You must be the change you wish to see in the world";
quotes[4] = "Always forgive your enemies; nothing annoys them so much";
quotes[5] = "Those who believe in telekinetics, raise my hand";

var counter = 0;

function loop() {

    if (counter > 5) counter = 0;
    $('#textslide p').eq(counter % 2).text(quotes[counter]);
    $('#textslide p').eq(counter % 2).fadeTo(500, 100).delay(1000);
    $('#textslide p').eq(counter % 2).fadeTo(500, 0);
    counter++;
    setTimeout(loop, 2000);
}
loop();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textslide">
    <p></p>
    <p></p>
</div>

Answer 2

这是我想到的。希望您需要类似的功能。

var quotes = new Array();
var quotes2 = new Array();

quotes[0] = "quote1";
quotes[1] = "quote2";
quotes[2] = "quote3";
quotes[3] = "quote4";
quotes[4] = "quote5";

quotes2[0] = "second quote1";
quotes2[1] = "second quote2";
quotes2[2] = "second quote3";
quotes2[3] = "second quote4";
quotes2[4] = "second quote5";

var counter = 0;
var counter2 = 0;

function loop() {
  if (counter > 4) counter = 0;
  $('#textslide p:first').text(quotes[counter]);
  $('#textslide p:first').hide();
  $("#textslide p:first").fadeIn("slow");
  counter++;
  setTimeout(loop2, 1000);
}

function loop2() {
  if (counter2 > 4) counter2 = 0;
  $('#textslide p:last').text(quotes2[counter2]);
  $('#textslide p:last').hide();
  $("#textslide p:last").fadeIn("slow");
  counter2++;
  setTimeout(loop, 1000);
}
loop();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="textslide">
  <p></p>
  <p></p>
</div>

jQuery 两行文本幻灯片

jQuery Text Slideshow on Two lines

javascript

jquery

slideshow