<style type="text/css">
#tupian
{
700px;
height:400px;
float:left;
}
.xiang{
display:none;
}
#yuandian{
500px;
height:20px;
margin-top:330px;
margin-left:-200px;
float:left;
}
.dian{
20px;
height:20px;
border:5px solid red;
border-radius:50%;
float:left;
margin-left:10px;}
</style>
</head>
<body>
<div id="tupian"> 图片
<img class="xiang" style="display:block" src="新建文件夹 (3)/001aa0c3d9071769f5371d.jpg" width="700px" height="400px" />
<img class="xiang" src="新建文件夹 (3)/242.jpg" width="700px" height="400px" />
<img class="xiang" src="新建文件夹 (3)/6263bfb9076c0445b228e&690.jfif" width="400px" height="400px" />
<img class="xiang" src="新建文件夹 (3)/7845c42ed0ca167ef6824e.jpg" width="700px" height="400px" />
<img class="xiang" src="新建文件夹 (3)/2012313134701.jpg" width="700px" height="400px"/>
</div>
<div id="yuandian"> 加圆点
<div sy="0" class="dian" style="border-color:blue" onclick="Xuan('0')"></div>
<div sy="1"class="dian" onclick="Xuan('1')"></div>
<div sy="2"class="dian" onclick="Xuan('2')"></div>
<div sy="3"class="dian" onclick="Xuan('3')"></div>
<div sy="4"class="dian" onclick="Xuan('4')"></div>
</div>
</body>
<script type="text/javascript">
window.setInterval("Huan()",2000);
var sy = 0
function Huan()
{
var xiang=document.getElementsByClassName("xiang");
sy++
if(sy>=xiang.length) 限制条件：走到最后一张，跳到第一张继续
{
sy = 0;
}
for(var i=0;i<xiang.length;i++) 让其他图片隐藏
{
xiang[i].style.display="none"
}
xiang[sy].style.display="block"; 下一张图片显示
var d = document.getElementsByClassName("dian"); 圆点
for(var j=0;j<d.length;j++)
{ if(d[j].getAttribute("sy")==sy) 判断属性值和索引是不是相等的
{
d[j].style.borderColor = "blue";
}
else
{
d[j].style.borderColor = "red";
}
}
}
function Xuan(a)
{ sy = a;
var xiang = document.getElementsByClassName("xiang");
for(var i =0;i<xiang.length;i++)
{
xiang[i].style.display="none";
}
xiang[a].style.display="block";
var d = document.getElementsByClassName("dian");
for(var j=0;j<d.length;j++)
{
d[j].style.borderColor="red";
}
d[a].style.borderColor="blue";
}
</script>
</html>