javascript 轮播图

最新推荐文章于 2025-05-28 10:56:51 发布

原创最新推荐文章于 2025-05-28 10:56:51 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #轮播图

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何使用HTML和JavaScript实现一个自动轮播图片的功能，包括图片切换、按钮控制及鼠标悬停预览等交互效果。通过具体代码示例，展示了前端开发中常见的轮播图制作技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
*{margin:0px; padding:0px;}
	#left{
		width: 30px;
		height: 30px;
		position: fixed;
		top:140px;
		left: 30px;
	}

	#right{
		width: 30px;
		height: 30px;
		position: fixed;
		top:140px;
		left: 430px;
	}
	.div1{
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: #2bf666;
		position: fixed;
		top:260px;
		left: 80px;
		text-align: center;
		line-height: 30px;
	}
	#a{
		background: red;
	}
</style>
<body>
	<div id="left" onclick="func('-')">
		<img src="./images/left.png" alt="" width="100%">
	</div>
	<img src="./images/11.jpg" alt="" style="display:block;" name="list">
	<img src="./images/22.jpg" alt="" style="display:none;" name="list">
	<img src="./images/33.jpg" alt="" style="display:none;" name="list">
	<img src="./images/44.jpg" alt="" style="display:none;" name="list">
	<img src="./images/55.jpg" alt="" style="display:none;" name="list">
	<div id="right" onclick="func('+')">
		<img src="./images/right.png" alt="" width="100%">
	</div>
	<div class="div1" id='a' name="list1" onmousemove="demo(0)" onmouseout="demo1(0)"></div>
	<div class="div1" name="list1" onmousemove="demo(1)" onmouseout="demo1(1)"></div>
	<div class="div1" name="list1" onmousemove="demo(2)" onmouseout="demo1(2)"></div>
	<div class="div1" name="list1" onmousemove="demo(3)" onmouseout="demo1(3)"></div>
	<div class="div1" name="list1" onmousemove="demo(4)" onmouseout="demo1(4)"></div>
</body>
<script>
	
	//获取对象
	var lists = document.getElementsByName('list');
	var lists1 = document.getElementsByName('list1');
	var m = 0;
	var timmer;
	var x =100;
	for(i=0; i<lists1.length;i++)
	{
		lists1[i].style.left = x +'px';
		lists1[i].innerHTML = i+1;
		x = x+50;
	}
	//让图片显示的方法
	function show(m)
	{
		for(i=0;i<lists.length;i++)
		{
			if(m == i)
			{
				lists[i].style.display = 'block';
				lists1[i].style.background = 'red';
			}else{
				lists[i].style.display = 'none';
				lists1[i].style.background = '#2bf666';
			}
		}
	}
	//让图片跑起来的方法
	function running()
	{	m++;
		if(m>=5)
		{
			m = 0;
		}
		show(m);
	}
	timmer = setInterval(running,1000);
	//让图片轮播的按钮左右移动
	function func(b)
	{
		//清楚定时器
		clearInterval(timmer);
		switch(b)
		{
			case '-' :
			//图片向左移动
			m = m - 2;
			if(m<-1)
			{
				m = lists.length -2;
			}
			break;

			case '+' :
			break;
		}
		//继续让图片跑起来
		running();
		timmer = setInterval(running,2000);
	}
	//移入小圆点事件
	function demo(c)
	{	
		//停止定时器
		clearInterval(timmer);
		//让你选中的图片显示出来
		for(i=0;i<lists1.length;i++)
		{
			if(c == i)
			{
				lists[i].style.display = 'block';
				lists1[i].style.background = 'red';
			}else{
				lists[i].style.display = 'none';
				lists1[i].style.background = '#2bf666';

			}
		}
	}
	//移出小圆点事件
	function demo1(d)
	{	
		//让移动到的图片设置到html中
		m = --d;
		//继续让图片跑起来
		running();
		timmer = setInterval(running,2000);
	}
</script>
</html>