js实现轮播图

最新推荐文章于 2024-11-08 19:00:00 发布

ElinorY

最新推荐文章于 2024-11-08 19:00:00 发布

阅读量349

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/weixin_38269675/article/details/88897695

版权

本文介绍如何使用JavaScript、CSS和HTML实现一个自动切换的轮播图效果。通过设置图片绝对定位，配合定时器自动切换，鼠标悬停时停止切换，同时实现圆点和按钮的交互功能，点击圆点或按钮可以手动切换轮播图片。

摘要由CSDN通过智能技术生成

在这里插入图片描述

轮播的背景图实际上都被层叠了在一个位置上（在这里使用的是 absolute这个属性）
下面是html的图片部分：

	<div class="picture" id="picture">
			<a href="" title="" class="active">
			<div class="pi" id='pi'>
				<img src="img/6.jpg" alt="" class="active1">
			</div>
		</a>
		<a href="" title="">
			<div class="pi">
				<img src="img/7.jpg" alt="">
			</div>
		</a>
		<a href="" title="">
			<div class="pi">
				<img src="img/8.jpg" alt="">
			</div>
		</a>
		</div>

下面是它对应的css属性：

	.picture,.pi{
			width: 1200px;
			height: 460px;
			position: absolute;
			top: 0;
		}
         .pi img{
         	width: 1200px;
         	height: 460px;
         	
         }
        .picture a{
        	display: none;
        }
        .picture .active{
        	display: block;
        }

图片的切换：默认状态下，每隔3秒自动切换，鼠标在上面停止切换，下面是图片切换对应的js：