html5中带有img和txt的动画_Html_Slideshow

html5中带有img和txt的动画

html

html5中带有img和txt的动画,html,slideshow,Html,Slideshow,我正在尝试制作一个sildeshow（如w3school所示），但是，在我的幻灯片中，我有img和txt（在大屏幕中并排），这不起作用如果我简单地定义而且根本没有文本，例如，那么它的工作很好，但不与下面的html和css <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <

我正在尝试制作一个sildeshow（如w3school所示），但是，在我的幻灯片中，我有img和txt（在大屏幕中并排），这不起作用

如果我简单地定义而且根本没有文本，例如，那么它的工作很好，但不与下面的html和css

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
    <style>
.mySlides {display:none;}
    </style>
  </head>
  <body>

<div class="anime">
  <div id="animg">
    <img src="hds1.jpg" style="height:30vh;"/>
  </div>
  <div id="antxt">Hello1</div>
  <div id="animg">
    <img src="hds2.jpg" style="height:30vh;"/>
  </div>
  <div id="antxt">Hello2</div>
  <div id="animg">
    <img src="hds3.jpg" style="height:30vh;"/>
  </div>
  <div id="antxt">Hello3</div>
</div>

<script>
  var myIndex = 0;
  carousel();

  function carousel() {
    var i;
    var x = document.getElementsByClassName("animg");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 3000); // Change image every 2 seconds
  }
</script>

更新

我试着让文本和img并排，并一起滑动；e、 g.img hds1和txt hello1将同时出现在屏幕上，并为hds2和hello2滑动。

在JavaScript中，您说的是

document.getElementsByClassName

，但在HTML中，您使用的是ID而不是类。这应该适合您：

   <!DOCTYPE html>
    <html>

      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="style.css">
        <style>
    .mySlides {display:none;}
        </style>
      </head>
      <body>

    <div class="anime">
      <div class="animg">
        <img src="https://placeimg.com/640/480/any" style="height:30vh;"/>
      </div>
      <div id="antxt">Hello1</div>
      <div class="animg">
        <img src="https://placeimg.com/640/480/any" style="height:30vh;"/>
      </div>
      <div id="antxt">Hello2</div>
      <div class="animg">
        <img src="https://placeimg.com/640/480/any" style="height:30vh;"/>
      </div>
      <div id="antxt">Hello3</div>
    </div>

    <script>
      var myIndex = 0;
      carousel();

      function carousel() {
        var i;
        var x = document.getElementsByClassName("animg");
        for (i = 0; i < x.length; i++) {
          x[i].style.display = "none";  
        }
        myIndex++;
        if (myIndex > x.length) {myIndex = 1}    
        x[myIndex-1].style.display = "block";  
        setTimeout(carousel, 3000); // Change image every 2 seconds
      }
    </script>


.mySlides{display:none；}
你好
你好
你好
var-myIndex=0；
转盘（）；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“animg”）；
对于（i=0；ix.length）{myIndex=1}
x[myIndex-1].style.display=“block”；
setTimeout（carousel，3000）；//每2秒更改一次图像
}

以上内容对我很有用（请注意，我已将图像更改为占位符图像）-但我并不是您所期望的100%的行为。也许你可以进一步解释或者发送一个链接到你想要实现的目标？

   <!DOCTYPE html>
    <html>

      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="style.css">
        <style>
    .mySlides {display:none;}
        </style>
      </head>
      <body>

    <div class="anime">
      <div class="animg">
        <img src="https://placeimg.com/640/480/any" style="height:30vh;"/>
      </div>
      <div id="antxt">Hello1</div>
      <div class="animg">
        <img src="https://placeimg.com/640/480/any" style="height:30vh;"/>
      </div>
      <div id="antxt">Hello2</div>
      <div class="animg">
        <img src="https://placeimg.com/640/480/any" style="height:30vh;"/>
      </div>
      <div id="antxt">Hello3</div>
    </div>

    <script>
      var myIndex = 0;
      carousel();

      function carousel() {
        var i;
        var x = document.getElementsByClassName("animg");
        for (i = 0; i < x.length; i++) {
          x[i].style.display = "none";  
        }
        myIndex++;
        if (myIndex > x.length) {myIndex = 1}    
        x[myIndex-1].style.display = "block";  
        setTimeout(carousel, 3000); // Change image every 2 seconds
      }
    </script>