Question

我想用外部json文件实现jquery滑块，滑块工作正常，但是当页面加载时只出现滑块按钮，点击按钮后出现图像，有人可以解决问题吗？

HTML

<div id="update">

</div>
<!--div block which is to be updated by jquery --->

<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js "></script>
<script>
    $(document).ready(function () {
        $.getJSON('data.json', function (data) {
            var output = '<div class="slideshow-container">';
            $.each(data.data, function (key, value) {
                output += '<div class="mySlides fade">';
                output += '<h3 class="numbertext"> Location:   ' + value.location + '</h3>';
                output += '<img src="' + value.links.logo2x + '" style="width:100%;"/>';
                output += '<div class="text"> Name:   ' + value.name + '</div>';
                output += '<div class="desc">' + value.description + '</div>';
                output += '</div>'; /*myslides*/
            });
            output += '<a class="prev" onclick="plusSlides(-1)">' + '&#10094;' + '</a>';
            output += '<a class="next" onclick="plusSlides(1)">' + '❯' + '</a>';
            output += '</div>';
            $('#update').html(output);
        });
    });

Javascript代码

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
        slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }

}

CSS

body {
   margin: 0;
   padding: 0;
   background-color: #dad7c7;
   font-family: 'Roboto', sans-serif;
   line-height: 1.2em;
}

* {
   box-sizing: border-box
}

.slideshow-container {
   width: 520px;
   position: relative;
   margin: 0 auto;
   max-width: 100%;
}

.mySlides {
   display: none;
   max-width: 100%;
}

mySlides img {
   width: 100%;
   height: auto;
}

.prev,
.next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   width: auto;
   padding: 16px;
   margin-top: -22px;
   color: white;
   font-weight: bold;
   font-size: 18px;
   transition: 0.6s ease;
   border-radius: 0 3px 3px 0;
   background-color: rgba(0, 0, 0, 0.6);
   border: 1px solid white;
}

.text {
   color: #f2f2f2;
   font-size: 16px;
   display: block;
   position: absolute;
   bottom: 0px;
   width: 100%;
   height: 30px;
   text-align: center;
   background-color: black;
   padding-top: 5px;
   text-transform: uppercase;
}
/* Position the "next button" to the right */

.next {
   right: 0;
   border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */

.numbertext {
   color: #f2f2f2;
   font-size: 12px;
   padding: 8px 12px;
   position: absolute;
   top: 0;
   width: 100%;
   text-align: center;
   background-color: black;
   margin: 0 auto;
}

.desc {
   position: absolute;
   color: #968888;
   line-height: 1.5em;
   padding: 10px;
   background-color: white;
   font-weight: 700;
   height: auto;
   overflow: auto;
   transition: all .3s ease;
}

.desc:hover {
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
/* Fading animation */

.fade {
   -webkit-animation-name: fade;
   -webkit-animation-duration: 1.5s;
   animation-name: fade;
   animation-duration: 1.5s;
}

@-webkit-keyframes fade {
   from {
       opacity: .4
   }
   to {
       opacity: 1
   }
}

@-moz-keyframes fade {
   from {
       opacity: .4
   }
   to {
       opacity: 1
   }
}

在页面加载时，只显示按钮

单击按钮图像加载

Answer 1

这很正常，因为在你的函数showSlides中你用for循环隐藏了所有img：请尝试

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
       slideIndex = 1
    }
    if (n < 1) {
       slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slides[n].style.display = "block";
}

更新2

我找到了！问题是因为您的幻灯片脚本在内部脚本之前启动。我已将此添加到函数中，并在创建元素后调用它。请尝试：

function showThis(){
  $(document).on("click",".prev",function(){
    plusSlides(-1)
  })
  $(document).on("click",".next",function(){
    plusSlides(1)
  })
  var slideIndex = 1;
  showSlides(slideIndex);

  function plusSlides(n) {
    showSlides(slideIndex += n);
  }

  function currentSlide(n) {
     showSlides(slideIndex = n);
  }

  function showSlides(n) {
    var i;
    var slides = $(".mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
        slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";

  }
}

body {
     margin: 0;
     padding: 0;
     background-color: #dad7c7;
     font-family: 'Roboto', sans-serif;
     line-height: 1.2em;
 }
 
 * {
     box-sizing: border-box
 }
 
 .slideshow-container {
     width: 520px;
     position: relative;
     margin: 0 auto;
     max-width: 100%;
 }
 
 .mySlides {
     display: none;
     max-width: 100%;
 }
 
 mySlides img {
     width: 100%;
     height: auto;
 }
 
 .prev,
 .next {
     cursor: pointer;
     position: absolute;
     top: 50%;
     width: auto;
     padding: 16px;
     margin-top: -22px;
     color: white;
     font-weight: bold;
     font-size: 18px;
     transition: 0.6s ease;
     border-radius: 0 3px 3px 0;
     background-color: rgba(0, 0, 0, 0.6);
     border: 1px solid white;
 }
 
 .text {
     color: #f2f2f2;
     font-size: 16px;
     display: block;
     position: absolute;
     bottom: 0px;
     width: 100%;
     height: 30px;
     text-align: center;
     background-color: black;
     padding-top: 5px;
     text-transform: uppercase;
 }
 /* Position the "next button" to the right */
 
 .next {
     right: 0;
     border-radius: 3px 0 0 3px;
 }
 /* On hover, add a black background color with a little bit see-through */
 
 .numbertext {
     color: #f2f2f2;
     font-size: 12px;
     padding: 8px 12px;
     position: absolute;
     top: 0;
     width: 100%;
     text-align: center;
     background-color: black;
     margin: 0 auto;
 }
 
 .desc {
     position: absolute;
     color: #968888;
     line-height: 1.5em;
     padding: 10px;
     background-color: white;
     font-weight: 700;
     height: auto;
     overflow: auto;
     transition: all .3s ease;
 }
 
 .desc:hover {
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 }
 /* Fading animation */
 
 .fade {
     -webkit-animation-name: fade;
     -webkit-animation-duration: 1.5s;
     animation-name: fade;
     animation-duration: 1.5s;
 }
 
 @-webkit-keyframes fade {
     from {
         opacity: .4
     }
     to {
         opacity: 1
     }
 }
 
 @-moz-keyframes fade {
     from {
         opacity: .4
     }
     to {
         opacity: 1
     }
 }
 
 @-o-keyframes fade {
     from {
         opacity: .4
     }
     to {
         opacity: 1
     }
 }
 
 @keyframes fade {
     from {
         opacity: .4
     }
     to {
         opacity: 1
     }
 }
 /**media queries **/
 
 @media (max-width:562px) {
     div.desc {
         height: 200px !important;
         overflow: auto !important;
         line-height: 1.2em;
         border-bottom: 2px solid #5D5D5D;
         text-align: justify;
     }
     .prev,
     .next {
         padding: 8px;
         font-size: 15px;
     }
     body::-webkit-scrollbar {
         width: 1em;
     }
     body::-webkit-scrollbar-track {
         -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
     }
     body::-webkit-scrollbar-thumb {
         background-color: indianred;
         outline: 1px solid slategrey;
     }
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="update">

    </div>
    <script>
        $(document).ready(function () {
        						output ="";
                    output += '<div class="mySlides fade">';
                    output += '<h3 class="numbertext"> Location:  </h3>';
                    output += '<img src="https://upload.wikimedia.org/wikipedia/en/thumb/6/63/IMG_(business).svg/1280px-IMG_(business).svg.png" style="width:100%;"/>';
                    output += '<div class="text"> </div>';
                    output += '<div class="desc"></div>';
                    output += '</div>'; /*myslides*/
                     output += '<div class="mySlides fade">';
                    output += '<h3 class="numbertext"> Location:  </h3>';
                    output += '<img src="https://media.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png" style="width:100%;"/>';
                    output += '<div class="text"> </div>';
                    output += '<div class="desc"></div>';
                    output += '</div>'; /*myslides*/
                     

                output += '<a class="prev" >' + '&#10094;' + '</a>';
                output += '<a class="next" >' + '❯' + '</a>';
                output += '</div>';
                $('#update').html(output);
          showThis();
        });
    </script>

图像未加载到jquery / json滑块

1 个答案: