Question

我找不到任何关于此的教程 - 我也找不到给你的例子（即使我之前已经看过这个），我也无法解决如何编写这个问题。< / p>

我想要一个句子，说：

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor。

我希望大胆的 faucibus 每三秒轮换一次 Fringilla ， Vulputate 和 Ligula - 有点像幻灯片。

所以只是澄清一下，三秒后的句子看起来像这样：

Vivamus sagittis lacus vel augue laoreet rutrum Fringilla dolor auctor。

我对编码没有太大的经验，所以任何帮助，或链接到教程网站或任何东西都会受到很多赞赏！

Answer 1

您可以使用javascript执行此操作，我建议您使用jQuery库。最简单的方法是在HTML文件的范围内放置您想要更改的单词：

Vivamus sagittis lacus vel augue laoreet rutrum <span id="rotate_word">faucibus</span> dolor auctor.

在此之后，转到您的javascript（加载jQuery）并尝试以下操作：

// Define initial variables.
var words = ["Fringilla", "Vulputate", "Ligula", "faucibus"];
var count = 0;

/*
 * The reason we do the following twice is because setInterval won't
 * initially call the changeWord function until 3 seconds has passed,
 * by doing it once first we make sure that we are changing the word
 * as soon as it starts.
 */

changeWord(); // Call the changeWord function
setInterval(changeWord, 3000); // Call it every 3 seconds

function changeWord() {

    // Define the word to create
    var current_word = words[count];
    console.log(current_word);

    // Change the word in the HTML
    $("#rotate_word").html(current_word);

    // Get the next word index in the array
    count++;

    // If we've reached the end of the word list, go back to the start
    if (count == words.length) { count = 0; }
}

我创建了一个JSFiddle来展示工作演示。

Answer 2

找到了一些东西！

Here's the link to the codrops article

这里有提供的编码（包括链接更改）：

提供的所有代码都是Mary Lou的作品，而不是我自己的

<section class="rw-wrapper">
<h2 class="rw-sentence">
    <span>Real poetry is like</span>
    <span>creating</span>
    <div class="rw-words rw-words-1">
        <span>breathtaking moments</span>
        <span>lovely sounds</span>
        <span>incredible magic</span>
        <span>unseen experiences</span>
        <span>happy feelings</span>
        <span>beautiful butterflies</span>
    </div>
    <br />
    <span>with a silent touch of</span>
    <div class="rw-words rw-words-2">
        <span>sugar</span>
        <span>spice</span>
        <span>colors</span>
        <span>happiness</span>
        <span>wonder</span>
        <span>happiness</span>
    </div>
</h2>
</section>

CSS：

.rw-wrapper{
width: 80%;
position: relative;
margin: 110px auto 0 auto;
font-family: 'Bree Serif';
padding: 10px;
}

.rw-sentence{
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

.rw-sentence span{
color: #444;
white-space: nowrap;
font-size: 200%;
font-weight: normal;
}

.rw-words{
display: inline;
text-indent: 10px;
}

.rw-words span{
position: absolute;
opacity: 0;
overflow: hidden;
width: 100%;
color: #6b969d;
}

.rw-words-1 span{
animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) { 
animation-delay: 3s; 
color: #6b889d;
}
.rw-words span:nth-child(3) { 
animation-delay: 6s; 
color: #6b739d; 
}
.rw-words span:nth-child(4) { 
animation-delay: 9s; 
color: #7a6b9d;
}
.rw-words span:nth-child(5) { 
animation-delay: 12s; 
color: #8d6b9d;
}
.rw-words span:nth-child(6) {  
animation-delay: 15s; 
color: #9b6b9d;
}

@keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}

@keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}

Answer 3

我做了一个fiddle，请告诉我这是否适合你。

var words = ['Fringilla', 'Vulputate', 'Ligula', 'faucibus'];
var current = 0;
var element = $('#target');
setInterval(function () {
    current = (current==words.length) ? 0 : current;
    element.html(words[current]);
    current += 1;
}, 3000);

Answer 4

可能你是在追求这些东西：

var list = ['Fringilla', 'Vulputate', 'Ligula', 'faucibus'];
var o = 0;

setInterval(function () {
    var w = list[o];
    $('p').each(function () {
        $(this).find('strong').fadeOut('fast', function () {
            $(this).html(w).fadeIn();
        });
    });
    (o == list.length) ? 0 : o++;
}, 3000);

如何为句子中的某个位置旋转多个单词

4 个答案:

Fiddle