ajax实现图片轮番滚动

最新推荐文章于 2021-08-06 16:17:55 发布

w_t_y_y

最新推荐文章于 2021-08-06 16:17:55 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/w_t_y_y/article/details/78322312

版权

思路：将图片的地址放在一个.json文件中，然后通过ajax去获取这个地址即可实现局部图片的刷新：

imgsrc.json:

[
	{
		"src": "img/flower.png"
	}, {
		"src": "img/jd.png"
	}, {
		"src": "img/tb.png"
	}
]

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.container {
			width: 400px;
			height: 800px;
			margin: auto;
			//background-color: pink;
		}
		
		.imgdiv {
			width: 100%;
			height: 30%;
			background-color: pink;
		}
		
		.dotdiv {
			width: 100%;
			height: 10%;
			margin: auto;
			//background-color: palegoldenrod;
		}
		
		.main {
			width: 50%;
			height: 100%;
			margin-left: 25%;
			margin-right: 25%;
			//background-color: red;
		}
		
		img {
			width: 100%;
			height: 100%;
		}
		
		ul li {
			width: 50px;
			height: 20%;
			color: orange;
			float: left;
			list-style-type: circle;
		}
		
		.dot1 {
			width: 10px;
			height: 10px;
			background-color: wheat;
			border-radius: 50%;
			float: left;
			margin-left: 10%;
		}
		
		.dot {
			/*dot为选中的*/
			width: 10px;
			height: 10px;
			background-color: gray;
			border-radius: 50%;
			float: left;
			margin-left: 10%;
		}
	</style>

	<body>
		<div class="container">
			<div class="imgdiv">
				<img  id="tp" οnmοusemοve="over()"/>
			</div>
			<div class="dotdiv">
				<div class="main">
					<button class="dot" οnmοuseοver="click1(0)"></button>
					<button class="dot1" οnmοuseοver="click1(1)"></button>
					<button class="dot1" οnmοuseοver="click1(2)"></button>
				</div>
			</div>
		</div>
		<script>
			
			function over(){
				var img=document.getElementById("tp");
				//alert(img.src);
				img.alt=img.src;
			}
			//创建对象
			var xmlhttp;
			if(window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest();
			} else {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			//回调函数
			var jon;
			xmlhttp.onreadystatechange = function() {
				if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { //发送成功
				   var imgsrc=xmlhttp.responseText;
				   jon=JSON.parse(imgsrc);
				   //alert(jon.length);
				}
			}
			//发送请求
			xmlhttp.open("GET","imgsrc.json",true);
			xmlhttp.send();

			//var imgarr = ["img/flower.png", "img/jd.png", "img/tb.png"];
			var img = document.getElementById("tp");
			var j = 0;
     /*这里ajax异步请求是有时差的，setIntervar()函数应该在ajax之前执行，之所以fun函数里jon已经有值，
     也是因为setInterval定时补上了这个时间差*/
			function fun() {
				//alert(jon.length);
				if(j == jon.length - 1) {
					j = 0;
				} else {
					j++;
				}
				img.src = jon[j].src;

				var dot = document.getElementsByClassName("dot");
				for(var i = 0; i < dot.length; i++) {
					dot[i].className = "dot1"; //清空所有的点为未选中
				}

				var dots = document.getElementsByClassName("dot1");
				dots[j].className = "dot";
			}
			var a=setInterval(fun, 1000);
			
			function click1(v){
				clearInterval(a);
			    //alert(v);
				var dot = document.getElementsByClassName("dot");
				for(var i = 0; i < dot.length; i++) {
					dot[i].className = "dot1"; //清空所有的点为未选中
				}

				var dots = document.getElementsByClassName("dot1");
				dots[v].className = "dot";
				document.getElementById("tp").src=jon[v].src;
				a=setInterval(fun, 2000);
			}
		</script>
	</body>

</html>

效果：

w_t_y_y

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
ajax实现图片轮番滚动

思路：将图片的地址放在一个.json文件中，然后通过ajax去获取这个地址即可实现局部图片的刷新：imgsrc.json:[ { "src": "img/flower.png" }, { "src": "img/jd.png" }, { "src": "img/tb.png" }]ajaxtranimg.html: .cont
复制链接

扫一扫