Question

我想制作一个循环，我只能从一个句子中淡出一个单词，但却无法执行。我已经看了在这个确切的平台上做到这一点的方法，并根据我的需要进行了更改，因此我不知道我的代码本身是否存在语法错误问题。请帮忙。

<DOCTYPE>
<html lang="es">
  <head>
    <link rel="stylesheet" href="main.css">
    <!-- jQuery -->
    <script src="jquery-3.3.1.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

      <script type="text/javascript" src="main.js"></script>

$(function(){
var words = [
'personas',
'comunidades',
"infraestructura"
], i = 0; // i for counting

setInterval(function(){
$('#changeText').fadeOut(function(){ //fadeout text
$(this).html(words[i=(i+1)%words.length]).fadeIn(); //update, count and fadeIn
});
}, 2000 ); //2s
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="cover">
    <div id="cover-caption">
      <div class="container">
       <div class="fullscreen-bg">
        <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
          <source src="Loop.mp4" type="video/mp4">    
          </video>
        </div>  
      </div>
      <div class="cover-text">
       <h1>Nosotros construimos <span id=changeText>más que robots</span></h1>
     </div>
   </div>
 </section>

Answer 1

我刚刚删除了所有冗余代码，它似乎正常工作。 为什么顺便导入jQuery三次？

$(function(){
var words = [
        'personas',
        'comunidades',
        "infraestructura"
        ], i = 0; // i for counting

    setInterval(function(){
        $('#changeText').fadeOut(function(){ //fadeout text
            $(this).html(words[i=(i+1)%words.length]).fadeIn(); //update, count and fadeIn
        });
    }, 2000 ); //2s
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="cover">
    <div id="cover-caption">
        <div class="container">
           <div class="fullscreen-bg">
                <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
                    <source src="Loop.mp4" type="video/mp4">    
                </video>
            </div>  
        </div>
          <div class="cover-text">
           <h1>Nosotros construimos <span id=changeText>más que robots</span></h1>
         </div>
    </div>
</section>

没有癌症：

const words = [
    'personas',
    'comunidades',
    "infraestructura"
];
let i = 0; 

const change = () => {
  changeText.classList.add("fade");
  changeText.addEventListener("transitionend", () => {
    changeText.textContent = words[i = (i + 1) % words.length];
    changeText.classList.remove("fade");
    setTimeout(change, 1500);
  }, { once: true });
};
setTimeout(change, 1000);

.fadeable {
  transition: opacity linear 0.5s;
  will-change: opacity;
}

.fadeable.fade {
  opacity: 0;
}

<section id="cover">
  <div id="cover-caption">
    <div class="container">
      <div class="fullscreen-bg">
        <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
                    <source src="Loop.mp4" type="video/mp4">    
                </video>
      </div>
    </div>
    <div class="cover-text">
      <h1>Nosotros construimos <span id=changeText class=fadeable>más que robots</span></h1>
    </div>
  </div>
</section>

_{（此外，我相信永远不应该使用jQuery。）}

在一个句子循环中淡出单词

1 个答案: