|
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
ul{
position: absolute;
left: 120px;
top: 180px;
}
li{
width:20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
color: #000;
padding-left: 10px;
margin-top: 5px;
display: inline-block;
list-style: none;
}
.div_1{
width:423px;
position: relative;
border: 1px solid #333;
margin: 0px auto;
}
.li1{
background-color: red;
color: white;
}
.li2{
background-color: white;
color: #000;
}
*{
padding: 0px;
margin: 0px;
}
</style>
<script type="text/javascript">
var images=new Array("1.png","2.jpg","3.jpg");
var i=0;
function imgs(){
document.getElementById("img").src=images[i];
var lis=document.getElementsByTagName("li");
for(var j=0;j<lis.length ;j++){
if(j==i){
lis[j].className="li1";
}else{
lis[j].className="li2";
}
}
i++;
if(i==images.length){
i=0;
}
}
var a;
function c(){
a=setInterval("imgs()",3000);
}
function b(){
clearInterval(a);
}
function l1(k){
i=k;
b();
imgs();
}
</script>
<body>
<div class="div_1">
<img id="img" src="1.png" width="423px" height="236px"/>
<ul>
<li class="li1">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
|
|
|Archiver|手机版|小黑屋|湖南新梦想
( 湘ICP备18019834号-2 )
发表于 2022-9-22 23:30:20