轮播图实现方法

pengcheng · 发表于 2023-6-2 02:18:29

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>

.aa li{
/* position: absolute;top: 40%; */
display: inline;
list-style-type: none;
/* border-radius; */
border: 1px solid black;
border-radius: 50%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
margin-left: 5px;
display: inline-block;

}

.aa{
position: absolute;
top: 88%;
left: 48%;
transform: translate(-50%, -50%);
}

#tp1
{

width: 600px;
margin: 0 auto;
}

div
{
position: relative;
text-align: center;
}

li:hover{
cursor: pointer;
}

li:nth-child(1)
{
background-color: blue;
color: #fff;
}

</style>

</head>
<body >
<div id="div">
<img src="js/1.jpg" alt="" id="tp1">

<ul class="aa">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

<script>
var time;
var list = new Array("js/1.jpg","js/2.jpg","js/3.jpg");
var i = 0;

function setIndex(index1){
i = index1-1;
document.getElementById("tp1").src = list;
var lis = document.getElementsByTagName("li");
for(var index=0;index < lis.length;index++)
{
lis[index].style.backgroundColor = "#fff";
lis[index].style.color = "#000";
}
lis.style.backgroundColor = "blue";
lis.style.color = "#fff";

}

function setImg()
{
i++;
if(list.length == i)
{
i = 0;
}
document.getElementById("tp1").src = list;

var lis = document.getElementsByTagName("li");
for(var index=0;index < lis.length;index++)
{
lis[index].style.backgroundColor = "#fff";
lis[index].style.color = "#000";
}
lis.style.backgroundColor = "blue";
lis.style.color = "#fff";
}

function myTime()
{
time = setInterval("setImg()",1000);
}

function StopTime()
{
clearInterval(time)
}

</script>

</body>
</html>

		自动登录	找回密码
密码			立即注册