用Ajax 写一个get请求的动态轮播图代码
时间: 2024-03-07 20:50:43 浏览: 27
好的,下面是一个使用 Ajax 发送 GET 请求获取图片并实现动态轮播的代码示例。
HTML代码:
```html
<div id="slideshow">
</div>
```
JavaScript代码:
```javascript
$(document).ready(function(){
$.ajax({
type: "GET",
url: "get_images.php",
dataType: "json",
success: function(data){
var html = "";
for(var i=0; i<data.length; i++){
html += '<img src="' + data[i].url + '" />';
}
$("#slideshow").html(html);
showSlides();
}
});
var slideIndex = 0;
function showSlides() {
var i;
var slides = $("#slideshow img");
for (i = 0; i < slides.length; i++) {
slides.eq(i).css("opacity", 0);
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides.eq(slideIndex - 1).css("opacity", 1);
setTimeout(showSlides, 3000); // 每3秒切换一张图片
}
});
```
这个代码使用了 jQuery 的 Ajax 方法发送 GET 请求,获取图片的 URL 数组。然后使用循环将每个图片的 URL 插入到 HTML 中。最后,使用定时器来轮播图片。
需要注意的是,由于 Ajax 是异步请求,需要在请求成功后再执行轮播代码,否则可能会出现获取不到图片的情况。