JavaScript基础---图片轮播

最新推荐文章于 2021-02-07 22:22:06 发布

阿木木的手套

最新推荐文章于 2021-02-07 22:22:06 发布

阅读量110

点赞数

分类专栏： JavaScript 文章标签： js css html5 html

本文链接：https://blog.csdn.net/weixin_41974599/article/details/107532593

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

轮播先把所有图片遍历出来，然后隐藏，需要用谁的时候谁再出现就行了。这个轮播没用动态绑定仅供参考

<!DOCTYPE html>
<html>
<head>
	<title>轮播图</title>
	
	<style type="text/css">
		div{
			width: 500px;
			height: 400px;
			margin: 50px auto;
			overflow: hidden;
			position: relative;
		}
		img{
			width: 500px;
			height: 400px;
		}
		p{
			color: #fff;
			width: 500px;height: 30px;
			position: absolute;z-index: 100;bottom: 0;left: 0;
			text-align: center;
			line-height: 30px;
		}
		p span{
			display: inline-block;
			width: 20px;
			height: 20px;
			text-align: center;
			background: rgb(254,254,254,0.6);
			border-radius: 50%;
			line-height: 20px;
			cursor: pointer;
		}
	</style>
	<script type="text/javascript">
		function change(num){
			var obj = document.getElementById('photo');
			var obj_a = obj.getElementsByTagName('a');
			for(var i = 0;i < obj_a.length;i++){
				obj_a[i].style.display = "none";
			}
				obj_a[num].style.display="block";
		}
	</script>
</head>
<body>
	<div id="photo">
		<a href=""><img src="images/1.jpg"></a>
		<a href=""><img src="images/2.jpg"></a>
		<a href=""><img src="images/3.jpg"></a>
		<a href=""><img src="images/4.jpg"></a>
		<a href=""><img src="images/5.jpg"></a>
		<p>
		<span onclick="change(0)">1</span>
		<span onclick="change(1)">2</span>
		<span onclick="change(2)">3</span>
		<span onclick="change(3)">4</span>
		<span onclick="change(4)">5</span>
		</p>
	</div>
</body>
</html>

阿木木的手套

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript基础---图片轮播

轮播先把所有图片遍历出来，然后隐藏，需要用谁的时候谁再出现就行了。这个轮播没用动态绑定仅供参考<!DOCTYPE html><html><head> <title>轮播图</title> <style type="text/css"> div{ width: 500px; height: 400px; margin: 50px auto; overflow: hidden; posit
复制链接

扫一扫