ajax实现轮播图
用的时候记得改一下路径，不要忘记了哦！ 整体效果如下，点击跳转到下一页：
html部分
我这里呢是用栅格布局写的，再加了点自己的js
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
border: 0;
}
html,body{
height: 100%;
}
body{
display: flex;
justify-content:center;
align-items: center;
background: gray;
}
.container{
width: 600px;
background: black;
}
.row{
width: 600px;
height: 250px;
display: flex;
justify-content: space-around;
align-items: center;
}
.col-md-1{
width: 100px;
height: 150px;
margin: 0;
padding: 0;
}
.sp{
display: block;
width: 50px;
height: 30px;
background: gainsboro;
border-radius: 5px;
margin: 10px auto 0;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<button class="btn btn-default" type="submit" id="previous"><</button>
<div class="col-md-1">
<img src="images/1.png" width="100" height="150" class="pic">
<span class="sp">180</span>
</div>
<div class="col-md-1">
<img src="images/2.png" width="100" height="150" class="pic">
<span class="sp">190</span>
</div>
<div class="col-md-1">
<img src="images/3.png" width="100" height="150" class="pic">
<span class="sp">210</span>
</div>
<div class="col-md-1">
<img src="images/4.png" width="100" height="150" class="pic">
<span class="sp">170</span>
</div>
<button class="btn btn-default" type="submit" id="next">></button>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
js部分
这就是封装了ajax而已
function myAjax(type,url,date,isAsyn,fun){
let xhr;
if (window.ActiveXObject) {
//ie
xhr = new ActiveXObject("Microsoft.XMLHttp");
} else {
//非ie
xhr = new XMLHttpRequest();
}
type = type.toLowerCase();
if(type == "get"){
let urlParam = url;
if(date != ""){
urlParam += "?" + date;
}
xhr.open(type,urlParam,isAsyn);
xhr.send();
}else if(type == "post"){
xhr.open(type,url,isAsyn);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(date);
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
fun(xhr.responseText);
}
}
}
json部分
[
{"id":1,"price":180.00,"img":"images/1.png"},
{"id":2,"price":190.00,"img":"images/2.png"},
{"id":3,"price":210.00,"img":"images/3.png"},
{"id":4,"price":170.00,"img":"images/4.png"},
{"id":5,"price":150.00,"img":"images/5.png"},
{"id":6,"price":140.00,"img":"images/6.png"},
{"id":7,"price":110.00,"img":"images/7.png"},
{"id":8,"price":120.00,"img":"images/8.png"},
{"id":9,"price":130.00,"img":"images/9.png"},
{"id":10,"price":170.00,"img":"images/10.png"},
{"id":11,"price":120.00,"img":"images/11.png"},
{"id":12,"price":230.00,"img":"images/12.png"},
{"id":13,"price":187.00,"img":"images/13.png"},
{"id":14,"price":199.00,"img":"images/14.png"},
{"id":15,"price":201.00,"img":"images/15.png"},
{"id":16,"price":213.00,"img":"images/16.png"},
{"id":17,"price":119.00,"img":"images/17.png"},
{"id":18,"price":195.00,"img":"images/18.png"},
{"id":19,"price":234.00,"img":"images/19.png"},
{"id":20,"price":222.00,"img":"images/20.png"},
{"id":21,"price":22.00,"img":"images/21.png"},
{"id":22,"price":120.00,"img":"images/22.png"},
{"id":23,"price":230.00,"img":"images/23.png"},
{"id":24,"price":187.00,"img":"images/24.png"}
]