js图片切换效果

最新推荐文章于 2023-08-29 19:44:57 发布

JackieDYH

最新推荐文章于 2023-08-29 19:44:57 发布

阅读量481

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：图片切换 javascript

本文链接：https://blog.csdn.net/JackieDYH/article/details/105138799

JavaScript 专栏收录该内容

401 篇文章

订阅专栏

本文提供了一个使用HTML、CSS和JavaScript实现的图集切换示例，通过按钮控制图片的前后切换，并展示相应的图片说明。

<!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>