js图片切换效果 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				width: 600px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var img = document.getElementsByTagName('img')[0];
				var imgexp = document.getElementsByTagName('h3')[0];
				var btnS = document.getElementsByTagName('button');
				// console.log(img,btnS);
				// var arr = ['./images/1.jpg','./images/2.jpg','./images/3.jpg','./images/4.jpg'];
				//数值函数
				var arrimg = [
					{src:'./images/1.jpg',exp:'第1张图'},
					{src:'./images/2.jpg',exp:'第2张图'},
					{src:'./images/3.jpg',exp:'第3张图'},
					{src:'./images/4.jpg',exp:'第4张图'}
				]
				// console.log(arrimg[0].src,arrimg[0].exp);
				var n = 0;
				btnS[0].onclick = function(){
					n--;
					if(n < 0){
						n = arrimg.length-1;
					}
					console.log(n);
					qh(n);
					// img.src = arr[n];
				}
				btnS[1].onclick = function(){
					n++;
					if(n >= arrimg.length){
						n = 0;
					}
					console.log(n);
					qh(n);
					// img.src = arr[n];
				}
				
				function qh(n){
					img.src = arrimg[n].src;
					imgexp.innerText = arrimg[n].exp;
				}
			}
		</script>
	</head>
	<body>
		<div>
			<img src="./images/1.jpg" alt="t">
			<h3>第1张图片</h3>
		</div>
		<button type="button">上一张</button>
		<button type="button">下一张</button>
	</body>
</html>

 

posted @ 2020-03-27 12:48  JackieDYH  阅读(4)  评论(0)  编辑  收藏  举报  来源