html制作焦点图代码

HTML可以用于制作各种网页，其中焦点图在网页中经常被用到。网页焦点图能够吸引用户的注意力，提高用户体验。下面我们来学习一下如何使用HTML制作焦点图代码。

<!DOCTYPE html>
<html lang="en">
<head>
	<Meta charset="UTF-8">
	<title>焦点图</title>
	<style type="text/css">
		.slider {
			width: 1000px;
			height: 300px;
			position: relative;
		}
		.slider img {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			opacity: 0;
			transition: opacity 1s linear;
		}
		.slider img.active {
			opacity: 1;
		}
		.slider .prev,.slider .next {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			font-size: 30px;
			cursor: pointer;
			z-index: 99;
			color: #fff;
			background-color: rgba(0,0.5);
			padding: 10px;
		}
		.slider .prev {
			left: 0;
		}
		.slider .next {
			right: 0;
		}
	</style>
</head>

<body>
	<div class="slider">
		<img src="img1.jpg" alt="" class="active">
		<img src="img2.jpg" alt="">
		<img src="img3.jpg" alt="">
		<img src="img4.jpg" alt="">
		<div class="prev">❮</div>
		<div class="next">❯</div>
	</div>

	<script type="text/javascript">
		var imgs = document.getElementsByTagName('img');
		var prevBtn = document.querySelector('.prev');
		var nextBtn = document.querySelector('.next');

		var index = 0;
		var len = imgs.length;

		prevBtn.onclick = function() {
			imgs[index].classList.remove('active');
			index--;
			if(index = len) {
				index = 0;
			}
			imgs[index].classList.add('active');
		}

		setInterval(function() {
			nextBtn.onclick();
		},3000);
	</script>
</body>
</html>

html制作焦点图代码

上面的代码实现了一个简单的焦点图轮播。通过CSS设置了轮播图容器的基本样式，包括容器宽高和相对定位，以及图片绝对定位和透明度过渡效果。JS代码实现了图片轮播和自动轮播效果。

总的来说，使用HTML制作焦点图相对来说比较简单，只需要通过CSS设置容器和图片样式，用JS实现图片轮播和控制按钮等一些效果即可。希望大家可以学会这些技能，制作出更加优秀的网页。

html制作焦点图代码

相关推荐