js通过opacity属性实现（按钮）（圆点）双控制及（自动）图片轮播

最新推荐文章于 2023-08-16 22:02:36 发布

前端从爬上楼到滚下楼

最新推荐文章于 2023-08-16 22:02:36 发布

阅读量1k

点赞数

文章标签： js 图片轮播

本文链接：https://blog.csdn.net/qq_32021025/article/details/84872352

版权

本文介绍如何使用JavaScript通过按钮和圆点控制实现图片轮播功能，同时支持自动轮播，为用户提供灵活的交互体验。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		.container{
    
			width: 500px;
			height: 300px;
			margin:0 auto;
			position: relative;
		}
		img{
    
			display: block;
			width:500px;
			height: 300px;
			position: absolute;
			transition: 500ms ease-in-out;
			opacity: 0;
		}
		button{
    
			display: block;
			width: 50px;
			height: 100px;
			position: absolute;
			top:100px;
		}
		button:nth-of-type(2){
    
			right: 0;
		}
.show{
    
			opacity: 1;
					}
/* .dispear{
			display: none;
		} */
	.li-cotainer{
    
		width: 130px;
		position: absolute;
		bottom: 0;
		left:100px;
		font-size