Question

我想制作幻灯片，就像在https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots2上看到的示例（减去侧箭头）。我找不到一种方法来创建自动交叉淡入淡出过渡，同时保留底部的选择按钮。

以下是给出的代码：

#include <stdio.h>

int main()
{    
    int x;
    int y;
    int z;
    int res;
    int data;
    int byte[] data={1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27}; // Read 4096 bytes
    byte[][][] res = new byte[3][3][3];
    for (x = 0 ; x != 3 ; x++) {
        for (y = 0 ; y != 3 ; y++) {
            for (z = 0 ; z != 3 ; z++) {
                res[x][y][z] = data[3*3*x + 3*y + z];
            }
        }
    }
    printf("Printing the 3D matrix\n");
    for (x = 0 ; x != 16 ; x++) {
        for (y = 0 ; y != 16 ; y++) {
            for (z = 0 ; z != 16 ; z++) {
                printf("%d\t",res[x][y][z]);
                printf("\n");
            } 
        }
    }

    return 0;
}

更新

<!DOCTYPE html>
<html>
 <title>W3.CSS</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="/lib/w3.css">
 <style>
  .mySlides {display:none}
  .w3-left, .w3-right, .w3-badge {cursor:pointer}
  .w3-badge {height:13px;width:13px;padding:0}
 </style>
 <body>
  <div class="w3-container">
   <h2>Slideshow Indicators</h2>
   <p>An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.</p>
  </div>
  <div class="w3-content w3-display-container" style="max-width:800px">
   <img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
   <img class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
   <img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
   <div class="w3-center w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
    <div class="w3-left w3-padding-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
    <div class="w3-right w3-padding-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
   </div>
  </div>

  <script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
 showDivs(slideIndex += n);
}

function currentDiv(n) {
 showDivs(slideIndex = n);
}

function showDivs(n) {
 var i;
 var x = document.getElementsByClassName("mySlides");
 var dots = document.getElementsByClassName("demo");
 if (n > x.length) {slideIndex = 1}    
 if (n < 1) {slideIndex = x.length}
 for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";  
 }
 for (i = 0; i < dots.length; i++) {
  dots[i].className = dots[i].className.replace(" w3-white", "");
 }
 x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " w3-white";
 }
  </script>

 </body>
</html>

问题是我无法获得功能按钮

Answer 1

var slideIndex = 1;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1} 
    x[slideIndex-1].style.display = "block"; 
    setTimeout(carousel, 2000); 
}
//showDivs(slideIndex);

并更改你的html div，其中包含＆lt;和＆gt;如

 <div class="w3-center w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
  </div>

您可以查看this了解详情！

希望它有所帮助！

Answer 2

使用 Bootstrap 可能很容易解决。尝试使用正确的脚本＆amp;样式表添加.......

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://unsplash.it/1200/380/?random" alt="Chania">
    </div>

    <div class="item">
     <img src="https://unsplash.it/1200/380/?random" alt="Chania">
    </div>

    <div class="item">
      <img src="https://unsplash.it/1200/380/?random" alt="Chania">
    </div>

    <div class="item">
      <img src="https://unsplash.it/1200/380/?random" alt="Chania">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://unsplash.it/1200/380/?random" alt="Chania">
    </div>

    <div class="item">
     <img src="https://unsplash.it/1200/380/?random" alt="Chania">
    </div>

    <div class="item">
      <img src="https://unsplash.it/1200/380/?random" alt="Chania">
    </div>

    <div class="item">
      <img src="https://unsplash.it/1200/380/?random" alt="Chania">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

如何使用按钮和过渡/交叉淡入淡出进行自动幻灯片放映？

3 个答案: