如何將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>