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

Question

i have a simple manual slideshow.I want to add ajax loader image when i click Previews or Next button for all time before load Test 1, Test 2, Test 3 texts. Any help to do it

 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

I created loading image by css ! But usually loading image is used in ajax call for long response ! For javascript is client language so it execute very faster so I tested with setTimeout for loading 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>