js实现图片轮播图效果

最新推荐文章于 2023-05-25 15:01:21 发布

在下，杨江河

最新推荐文章于 2023-05-25 15:01:21 发布

阅读量192

点赞数

分类专栏： Mac开发文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Rockandrollman/article/details/128622724

版权

Mac开发专栏收录该内容

294 篇文章 3 订阅

订阅专栏

该代码示例展示了如何利用JavaScript实现一个简单的图片轮播效果。通过定义图片数组，设置定时器改变图片源，并配合CSS调整样式，同时更新底部指示点的状态，实现了轮播图的基本功能。

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

描述

js实现图片轮播图效果

代码

var arr = new Array("1.jpg","2.jpg","3.jpg","4.png");
var index = 0;
//窗口加载完毕  调用函数 匿名函数
window.onload=function(){
	window.setInterval("change()",2000);
}

function change(){
	index++;
	document.getElementById("myimg").src="img/"+arr[index];
	
	var circleArr = document.getElementById("circle_list").children;
	
	for(var i = 0 ;i<circleArr.length;i++){
		circleArr[i].className="circle"
	}
	
	circleArr[index].className="circle focus";
	
	if(index == 3){
		index = -1;
	}
}

.circle{
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 1px solid white;
	border-radius: 10px;
	margin-left: 5px;
}

.circle_list{
	margin-top: -30px;
}

.focus{
	background-color: white;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/index3.js"></script>
		<link rel="stylesheet" href="css/index3.css"/>
	</head>
	<body>
		<div>
		<img id="myimg" src="img/1.jpg"/>
		</div>
		<div id="circle_list" class="circle_list">
			<span class="circle focus"></span>
			<span class="circle"></span>
			<span class="circle"></span>
			<span class="circle"></span>
		</div>
	</body>
</html>