作者：titia | 来源：互联网 | 2024-12-13 19:17
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 700px;
height: 400px;
border: solid;
margin: 100px auto;
position: relative;
}
img{
width: 700px;
height: 400px;
display: none;
}
input{
width: 25px;
height: 50px;
background: rgba(0,0,0,0.5);
border-style: none;
outline: none;
cursor: pointer;
}
#left{
position: absolute;
top:170px;
left: 0px;
}
#right{
position: absolute;
top:170px;
right: 0px;
}
ul{
position: absolute;
bottom: 0px;
left: 250px;
}
li{
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid;
margin: 10px;
float: left;
cursor: pointer;
}
.active{
display: block;
}
.circle{
background: rgba(0,0,0,0.5);
}
style>
head>
<body>
<div id="box">
<input type="button" value="<" id="left">
<input type="button" value=">" id="right">
<img src="images/1.jpg" class="active">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
<ul>
<li class="circle">li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
div>
body>
<script>
window.Onload=function(){
var ArrImg=document.getElementsByTagName('img');
var ArrLi=document.getElementsByTagName("li");
var oLeft=document.getElementById('left');
var oRgt=document.getElementById("right");
var oBox=document.getElementById("box");
var imgNum=0;
for (var i = 0; i <ArrLi.length; i++) {
ArrLi[i].index=i;
ArrLi[i].onmouseover=function(){
for (var l = 0; l <ArrLi.length; l++) {
ArrLi[l].className="";
ArrImg[l].className="";
}
this.className="circle";
ArrImg[this.index].className="active";
imgNum=this.index;
}
}
oRgt.Onclick=move;
var x=setInterval(move,1000);
oBox.Onmouseover=function(){
clearInterval(x)};
// 鼠标移入后清除定时器 oBox.Onmouseout=function(){
x=setInterval(move,1000);
}// 鼠标移出后加入定时器 function move(){
imgNum=imgNum+1;
if (imgNum>=ArrImg.length) {
imgNum=0;
}
for (var z = 0; z <ArrLi.length; z++) {
ArrImg[z].className="";
ArrLi[z].className="";
}
ArrImg[imgNum].className="active";
ArrLi[imgNum].className="circle";
}
oLeft.Onclick=function(){
imgNum=imgNum-1;
if (imgNum<0) {
imgNum=ArrLi.length-1;
}
for (var j = 0; j <ArrLi.length; j++) {
ArrImg[j].className="";
ArrLi[j].className="";
}
ArrImg[imgNum].className="active";
ArrLi[imgNum].className="circle";
}
}
script>
html>
京公网安备 11010802041100号