事件轮播实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#img1{
height: 300px;
width: 400px;
position: absolute;
left: 500px;
top: 200px;
}
#img2{
height: 300px;
width: 400px;
position: absolute;
left: 500px;
top: 200px;
}
#img3{
height: 300px;
width: 400px;
position: absolute;
left: 500px;
top: 200px;
}
#p1{
height: 5px;
width: 5px;
border-radius: 5px;
position: absolute;
border:1px red solid;
top: 470px;
left: 830px;
}
#p1:hover{
background-color: white;
cursor: pointer;
}
#p2{
height: 5px;
width: 5px;
border-radius: 5px;
border: 1px red solid;
position: absolute;
top: 470px;
left: 845px;
}
#p2:hover{
background-color: white;
cursor: pointer;
}
#p3{
height: 5px;
width: 5px;
border-radius: 5px;
border:1px red solid;
position: absolute;
left: 860px;
top: 470px;
}
#p3:hover{
background-color: white;
cursor: pointer;
}
#b{
display: none;
}
#c{
display: none;
}
</style>
<script>
$(document).ready(function(){
$(function que(){
function showb(){
$("#a").fadeOut(500);
$("#b").fadeIn(500);
}
setTimeout(showb,3000);
function showc(){
$("#b").fadeOut(500);
$("#c").fadeIn(500);
}
setTimeout(showc,6000);
function showa(){
$("#c").fadeOut(500);
$("#a").fadeIn(500);
}
setTimeout(showa,9000);
setInterval(que,9000);
});
$("#p1").mouseover(function(){
$("#b").fadeOut(500);
$("#c").fadeOut(500);
$("#a").fadeIn(500);
});
$("#p2").mouseover(function(){
$("#c").fadeOut(500);
$("#a").fadeOut(500);
$("#b").fadeIn(500);
});
$("#p3").mouseover(function(){
$("#b").fadeOut(500);
$("#a").fadeOut(500);
$("#c").fadeIn(500);
});
});
</script>
</head>
<body>
<div id="img1">< img id="a" src="" width="400px" height="300px" alt=""></div>
<div id="img2">< img id="b" src="" width="400px" height="300px" alt=""></div>
<div id="img3">< img id="c" src="" width="400px" height="300px" alt=""></div>
<div id="p1"></div>
<div id="p2"></div>
<div id="p3"></div>
</body>
</html>
