图片轮播

来源：互联网发布：windows 批处理多进程编辑：程序博客网时间：2024/06/07 03:46

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style type="text/css">
#box{
width: 600px;
height: 500px;
margin: 0 auto;
background: red;
position: relative;
}
#box #img{
width: 600px;
height: 500px;
}
#ul{
position: absolute;
right: 100px;
bottom: 25px;
}
#ul li{
list-style: none;
width: 15px;
height: 15px;
background: red;
border-radius: 50%;
display: inline-block;
}
#ul .active{
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<img src="img/a (1).jpg" id="img">
<ul id="ul">
<li onmouseover="end(0)" onmouseout="begin()" class="active"></li>
<li onmouseover="end(1)" onmouseout="begin()"></li>
<li onmouseover="end(2)" onmouseout="begin()"></li>
<li onmouseover="end(3)" onmouseout="begin()"></li>
<li onmouseover="end(4)" onmouseout="begin()"></li>
<li onmouseover="end(5)" onmouseout="begin()"></li>
</ul>
</div>
</body>
<script type="text/javascript">
arrImg=["img/a (1).jpg","img/a (2).jpg","img/a (3).jpg","img/a (4).jpg","img/a (5).jpg","img/a (6).jpg"];
var t=setInterval(f,2000);
var img=document.getElementById("img");
var lis=document.getElementById("ul").getElementsByTagName("li");
var n=1;
function f(){
img.src=arrImg[n];
for (var i = 0; i < lis.length; i++) {
lis[i].style.background="red";
}
lis[n].style.background="yellow";
n++;
if (n>arrImg.length-1) {
n=0;
}
}
function end(v){
clearInterval(t);
img.src=arrImg[v];
for (var i = 0; i < lis.length; i++) {
lis[i].style.background="red";
}
lis[v].style.background="yellow";
if (v<arrImg.length-1) {
n=v+1;
}
else{
n=0;
}
}
function begin(){
t=setInterval(f,2000);
}
</script>
</html>

阅读全文

0 0