如何将Ajax加载程序添加到幻灯片

Question

我有一个简单的手动幻灯片。我想在加载测试1，测试2，测试3文本之前一直单击``预览''或``下一步''按钮时添加ajax加载器图像。 任何帮助做到这一点

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

 <div class="slider"> <button class="" onclick="plusDivs(-1)">&#10094;</button> <button class="" onclick="plusDivs(1)">&#10095;</button> <div class="mySlides">Test 1</div> <div class="mySlides">Test 2</div> <div class="mySlides">Test 3</div> </div> 

Answer 1

我通过css创建了加载图像！ 但是通常在ajax调用中使用加载图像来获得长响应！ 因为javascript是客户端语言，所以它执行得非常快，所以我用setTimeout测试了加载remove！

 var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { $(".loader").show(); setTimeout(function(){ showDivs(slideIndex += n); },1000); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } $(".loader").hide(); x[slideIndex-1].style.display = "block"; } 

 .loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 120px; display:none; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slider"> <button class="" onclick="plusDivs(-1)">&#10094;</button> <button class="" onclick="plusDivs(1)">&#10095;</button> <div class="mySlides">Test 1</div> <div class="mySlides">Test 2</div> <div class="mySlides">Test 3</div> </div> <div class='loader'></div>