原生JS图片切换

最新推荐文章于 2024-11-02 19:19:35 发布

whd-go ahead boldly

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量58

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_49612237/article/details/115837466

版权

js图片切换

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>05 图片切换</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		#box{
			border: 1px solid #ccc;
			width: 430px;
			height: 70px;
			padding-top: 430px;
			background: url('images/big_pic1.jpg') no-repeat;
		}
		#box ul li{
			display: inline-block;
			margin-right: 15px;
		}
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li class="item">
				<img src="images/pic1.jpg">
			</li>
			<li class="item">
				<img src="images/pic2.jpg">
			</li>
			<li class="item">
				<img src="images/pic3.jpg">
			</li>
			<li class="item">
				<img src="images/pic4.jpg">
			</li>
			<li class="item">
				<img src="images/pic5.jpg">
			</li>
		</ul>
	</div>
	<script type="text/javascript">
		// 1.获取事件源
		function $(id){
			return typeof id === 'string' ? document.getElementById(id) : null;
		}
		var items = document.getElementsByClassName('item');
		for(var i = 0;i < items.length; i++){
			var item  = items[i];
			item.index = i+1;
			items[i].onmouseover = function(){
				$('box').style.background = ` url('images/big_pic${this.index}.jpg') no-repeat`;
			}
		}
	</script>
	
</body>
</html>