比较完整的轮播图

最新推荐文章于 2024-11-16 14:11:26 发布

小朱

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量308

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/z123h6/article/details/105835882

版权

轮播图是html+css+javascript

思路：是使用的定时器的功能

HTML+CSS的代码如下

<head>
	<title>轮播图1</title>
	<style type="text/css">
	ul{
		list-style:none;
	}
	.imgs{
		width: 590px;
		height: 470px;
		overflow: hidden;
	}
	.dots{
		width: 200px;
		position: absolute;
		left: 260px;
		top: 400px;
		z-index: 999;
	}
	.dot{
		width: 10px;
		height: 10px;
		border: 2px solid #fff;
		border-radius: 10px;
		display: inline-block;
	}
	
	</style>
</head>
<body>
<div class="ad">
	<ul class="imgs">
		<li class="img_li"><img src="img/1.jpg"></li>
		<li class="img_li"><img src="img/2.jpg"></li>
		<li class="img_li"><img src="img/3.jpg"></li>
		<li class="img_li"><img src="img/4.jpg"></li>
		<li class="img_li"><img src="img/5.jpg"></li>
	</ul>
	<ul class="dots">
		<li class="dot" style="background-color: #fff"></li>
		<li class="dot"></li>
		<li class="dot"></li>
		<li class="dot"></li>
		<li class="dot"></li>
	</ul>
</div>

javascript的代码

<script type="text/javascript">
//封装一个函数 用于切换显示指定的图片
function change(n){
	//显示 下标为n的图片，其他隐藏
	//显示 下标为n的白色圈，其他为空
	var img_lis = document.querySelectorAll('.img_li');
	var dots = document.querySelectorAll('.dot');
	for (var i = 0; i < img_lis.length; i++) {
		img_lis[i].style.display = 'none';
		dots[i].style.backgroundColor = '';
	}
		img_lis[n].style.display = 'block';
		dots[n].style.backgroundColor = '#fff';
}

//思路：设置定时器
var num = 0;
var timer;
function setTimer(){
	timer = setInterval(function(){
		//计算显示哪张图片
		num++;
		//判断
		num = num > 5 ? 0 : num;
		//调用change函数 显示num张
		change(num);
	}, 1000);
}

setTimer();
//设置鼠标悬浮 切换图片
var dots = document.querySelectorAll('.dot');
for(var i=0; i<dots.length;i++){
	(function(i){
		dots[i].onmouseover = function(){
		//清除定时器
		clearInterval(timer);
		//调用change函数 显示第i张图片
		change(i);
	};
	//鼠标离开
	dots[i].onmouseout = function(){
		//设置定时器
		num = i;
		setTimer();
	}

	})(i);
}

</script>