使用“php语言”，我如何创建一个图片幻灯片，但主要是像Pinterest上的“图片旋转木马”的文本？[关闭]

bxgwgixi  于 2023-06-21  发布在  PHP
关注(0)|答案(1)|浏览(157)

已关闭，此问题需要更focused。目前不接受答复。
**想改善这个问题吗？**更新问题，使其仅通过editing this post关注一个问题。

7天前关闭
Improve this question
我在理解编码和计算机语言方面勉强算不上Maven，但我确实对它们很着迷。回到这个问题-那么，我如何创建一个表，文本可以插入内;如果单击箭头，则可以转到最后一张或下一张幻灯片，而没有任何动画。
我用php来做这个。
我的想法是：

  1. Slide #1                 Slide #2
  2.   ┏━━━━━━━━━━┓             ┏━━━━━━━━━━┓
  3.   ┃          ┃             ┃          ┃
  4. ◁ ┃    Hi    ┃ ▷         ◁ ┃  there   ┃ ▷
  5.   ┃          ┃             ┃          ┃
  6.   ┗━━━━━━━━━━┛             ┗━━━━━━━━━━┛

我最初是使用“人工智能”来生成文本的，结果几乎总是以我不希望的方式出现。

php

1条答案

按热度按时间
owfi6suc

owfi6suc1#

我不知道这是不是你需要的。我引用了别人的代码，并根据你的要求修改了它。
联系我们

  1. <div class="slideshow-container">
  2.   <div class="mySlides fade">
  3.     <div class="img">AAA</div>
  4.     <div class="text">A</div>
  5.   </div>
  7.   <div class="mySlides fade">
  8.     <div class="img">BBB</div>
  9.     <div class="text">Two</div>
  10.   </div>
  12.   <div class="mySlides fade">
  13.     <div class="img">CCC</div>
  14.     <div class="text">Three</div>
  15.   </div>
  17.   <div class="mySlides fade">
  18.     <div class="img">DDD</div>
  19.     <div class="text">Four</div>
  20.   </div>
  22.   <a class="prev" onclick="plusSlides(-1)">❮</a>
  23.   <a class="next" onclick="plusSlides(1)">❯</a>
  24. </div>

css：

  1. body {
  2.   font-family: "Arial", "sans-serif";
  3.   margin: 0 auto;
  4. }
  6. .mySlides {
  7.   display: none;
  8.   width: 100%;
  9.   height: 100%;
  10.   background: gray;
  11. }
  13. .img {
  14.   color: #f2f2f2;
  15.   font-size: 36px;
  16.   padding: 5px 10px;
  17.   position: absolute;
  18.   top: 50%;
  19.   left: 50%;
  20.   transform: translate(-50%, -50%);
  21.   text-align: center;
  22.   border-radius: 20px;
  23.   background: rgba(0, 0, 0, 0.5);
  24. }
  26. /* Slideshow container */
  27. .slideshow-container {
  28.   width: 512px;
  29.   height: 300px;
  30.   position: relative;
  31.   margin: 0 auto;
  32. }
  34. /* Next & previous buttons */
  35. .prev,
  36. .next {
  37.   cursor: pointer;
  38.   position: absolute;
  39.   top: 50%;
  40.   transform: translate(0%, -50%);
  41.   width: auto;
  42.   padding: 16px;
  43.   color: white;
  44.   font-weight: bold;
  45.   font-size: 18px;
  46.   border-radius: 10px;
  47.   user-select: none;
  48. }
  50. /* Position the "next button" to the right */
  51. .next {
  52.   right: 0;
  53. }
  55. /* On hover, add a black background color with a little bit see-through */
  56. .prev:hover,
  57. .next:hover {
  58.   background-color: rgba(0, 0, 0, 0.8);
  59. }
  61. /* Caption text */
  62. .text {
  63.   color: #f2f2f2;
  64.   font-size: 15px;
  65.   padding: 5px 10px;
  66.   position: absolute;
  67.   bottom: 0px;
  68.   left: 50%;
  69.   transform: translate(-50%, 0%);
  70.   text-align: center;
  71.   border-radius: 20px;
  72.   background: rgba(0, 0, 0, 0.5);
  73. }
  75. /* Number text (1/3 etc) */
  76. .numbertext {
  77.   color: #f2f2f2;
  78.   font-size: 12px;
  79.   padding: 5px 10px;
  80.   position: absolute;
  81.   border-radius: 20px;
  82.   background: rgba(0, 0, 0, 0.7);
  83.   top: 0;
  84. }
  86. /* The dots/bullets/indicators */
  87. .dot {
  88.   cursor: pointer;
  89.   height: 15px;
  90.   width: 15px;
  91.   margin: 0 2px;
  92.   background-color: #bbb;
  93.   border-radius: 50%;
  94.   display: inline-block;
  95. }
  97. .active,
  98. .dot:hover {
  99.   background-color: #717171;
  100. }
  102. /* Fading animation */
  103. @keyframes fade {
  104.   from {
  105.     opacity: 0.4;
  106.   }
  108.   to {
  109.     opacity: 1;
  110.   }
  111. }
  113. /* On smaller screens, decrease text size */
  114. @media only screen and (max-width: 512px) {
  115.   .prev,
  116.   .next,
  117.   .text {
  118.     font-size: 12px;
  119.   }
  120. }

javascript：

  1. let slideIndex = 1;
  2. showSlides(slideIndex);
  4. function plusSlides(n) {
  5.   showSlides((slideIndex += n));
  6. }
  8. function showSlides(n) {
  9.   let i;
  10.   let slides = document.getElementsByClassName("mySlides");
  11.   if (n > slides.length) {
  12.     slideIndex = 1;
  13.   }
  14.   if (n < 1) {
  15.     slideIndex = slides.length;
  16.   }
  17.   for (i = 0; i < slides.length; i++) {
  18.     slides[i].style.display = "none";
  19.   }
  20.   slides[slideIndex - 1].style.display = "block";
  21. }

希望能对你有所帮助。

展开查看全部
赞(0）分享  回复(0）举报  2023-06-21
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com