我有一个简单的手动幻灯片。我想在加载测试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)">❮</button>
<button class="" onclick="plusDivs(1)">❯</button>
<div class="mySlides">Test 1</div>
<div class="mySlides">Test 2</div>
<div class="mySlides">Test 3</div>
</div>
答案 0 :(得分:0)
我用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";
}
&#13;
.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); }
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<button class="" onclick="plusDivs(-1)">❮</button>
<button class="" onclick="plusDivs(1)">❯</button>
<div class="mySlides">Test 1</div>
<div class="mySlides">Test 2</div>
<div class="mySlides">Test 3</div>
</div>
<div class='loader'></div>
&#13;