javascript 幻灯片代码(含自动播放)

素材

javascript 幻灯片代码(含自动播放) javascript 幻灯片代码(含自动播放) javascript 幻灯片代码(含自动播放)
html

  1. <div class="slideshow-container">
  2.   <div class="mySlides fade">
  3.     <div class="numbertext">1 / 3</div>
  4.     <img src="https://www.javar.cc/wp-content/uploads/2018/05/img_fjords_wide.jpg" style="width:100%">
  5.     <div class="text">文本 1</div>
  6.   </div>
  7.   <div class="mySlides fade">
  8.     <div class="numbertext">2 / 3</div>
  9.     <img src="https://www.javar.cc/wp-content/uploads/2018/05/img_mountains_wide.jpg" style="width:100%">
  10.     <div class="text">文本 2</div>
  11.   </div>
  12.   <div class="mySlides fade">
  13.     <div class="numbertext">3 / 3</div>
  14.     <img src="https://www.javar.cc/wp-content/uploads/2018/05/img_nature_wide.jpg" style="width:100%">
  15.     <div class="text">文本 3</div>
  16.   </div>
  17. </div>
  18. <br>
  19. <div style="text-align:center">
  20.   <span class="dot" onclick="currentSlide(1)"></span>
  21.   <span class="dot" onclick="currentSlide(2)"></span>
  22.   <span class="dot" onclick="currentSlide(3)"></span>
  23. </div>

css

  1. * {box-sizing:border-box}
  2. body {font-family: Verdana,sans-serif;}
  3. .mySlides {display:none}
  4. /* 幻灯片容器 */
  5. .slideshow-container {
  6.   max-width: 1000px;
  7.   position: relative;
  8.   margin: auto;
  9. }
  10. /* 下一张 & 上一张 按钮 */
  11. .prev, .next {
  12.   cursor: pointer;
  13.   position: absolute;
  14.   top: 50%;
  15.   width: auto;
  16.   margin-top: -22px;
  17.   padding: 16px;
  18.   color: white;
  19.   font-weight: bold;
  20.   font-size: 18px;
  21.   transition: 0.6s ease;
  22.   border-radius: 0 3px 3px 0;
  23. }
  24. /* 定位 "下一张" 按钮靠右 */
  25. .next {
  26.   right: 0;
  27.   border-radius: 3px 0 0 3px;
  28. }
  29. /* On hover, add a black background color with a little bit see-through */
  30. .prev:hover, .next:hover {
  31.   background-color: rgba(0,0,0,0.8);
  32. }
  33. /* 标题文本 */
  34. .text {
  35.   color: #f2f2f2;
  36.   font-size: 15px;
  37.   padding: 8px 12px;
  38.   position: absolute;
  39.   bottom: 8px;
  40.   width: 100%;
  41.   text-align: center;
  42. }
  43. /* 数字文本 (1/3 等) */
  44. .numbertext {
  45.   color: #f2f2f2;
  46.   font-size: 12px;
  47.   padding: 8px 12px;
  48.   position: absolute;
  49.   top: 0;
  50. }
  51. /* 标记符号 */
  52. .dot {
  53.   cursor:pointer;
  54.   height: 13px;
  55.   width: 13px;
  56.   margin: 0 2px;
  57.   background-color: #bbb;
  58.   border-radius: 50%;
  59.   display: inline-block;
  60.   transition: background-color 0.6s ease;
  61. }
  62. .active, .dot:hover {
  63.   background-color: #717171;
  64. }
  65. /* 淡出动画 */
  66. .fade {
  67.   -webkit-animation-name: fade;
  68.   -webkit-animation-duration: 1.5s;
  69.   animation-name: fade;
  70.   animation-duration: 1.5s;
  71. }
  72. @-webkit-keyframes fade {
  73.   from {opacity: .4}
  74.   to {opacity: 1}
  75. }
  76. @keyframes fade {
  77.   from {opacity: .4}
  78.   to {opacity: 1}
  79. }

JS

  1. var slideIndex = 0;
  2. showSlides();
  3. function showSlides() {
  4.     var i;
  5.     var slides = document.getElementsByClassName("mySlides");
  6.     for (i = 0; i < slides.length; i++) {
  7.         slides[i].style.display = "none";
  8.     }
  9.     slideIndex++;
  10.     if (slideIndex> slides.length) {slideIndex = 1}
  11.     slides[slideIndex-1].style.display = "block";
  12.     setTimeout(showSlides, 2000); // Change image every 2 seconds
  13. }

最终效果
javascript 幻灯片代码(含自动播放)

腾讯云服务器安全可靠高性能,多种配置供您选择
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: