<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
a{
text-decoration: none;
}
.box{
width:640px;
height:426px;
margin:100px auto;
position: relative;
}
.pic_num>li{
position: absolute;
display: none;
}
.pic_num>li:first-child{
display: block;
}
/* 圆点*/
.num{
overflow: hidden;
position: absolute;
top:380px;
left:270px;
}
.num>li{
float:left;
width:15px;
height:15px;
border-radius: 50%;
background: #eee;
margin-left:5px;
}
.num>li:first-child{
background: #f00;
}
button{
width:30px;
height:60px;
position: absolute;
}
.prev{
top:183px;
}
.next{
top:183px;
right:0;
}
</style>
</head>
<body>
<script>
//自己动起来
//1.找到图片
//2.找到圆点
var picLi=document.querySelectorAll('.pic_num>li');
var numLi=document.querySelectorAll('.num>li');
var timer;
var i=0;
function play(){
timer=setInterval(function(){
picLi[i].style.display='none';
numLi[i].style.background='#eee';
i++;
if(i>4){
i=0;
}
picLi[i].style.display='block';
numLi[i].style.background='#f00';
},1000)
}
play();
//给box添加鼠标移入移出事件
var box=document.querySelector('.box');
box.onmouseover=function(){
clearInterval(timer);
}
box.onmouseout=function(){
play();
}
//点击按钮
var prev=document.querySelector('.prev');
var next=document.querySelector('.next');
next.onclick=function(){
picLi[i].style.display='none';
numLi[i].style.background='#eee';
i++;
if(i>4){
i=0;
}
picLi[i].style.display='block';
numLi[i].style.background='#f00';
}
prev.onclick=function(){
picLi[i].style.display='none';
numLi[i].style.background='#eee';
i--;
if(i<0){
i=4;
}
picLi[i].style.display='block';
numLi[i].style.background='#f00';
}
//点击圆点切换
for(var j=0;j<numLi.length;j++){
numLi[j].index=j;
numLi[j].onclick=function(){
var num=this.index;
for(var a=0;a<numLi.length;a++){
picLi[a].style.display='none';
numLi[a].style.background='#eee';
}
picLi[num].style.display='block';
numLi[num].style.background="#f00";
}
}
</script>
网友评论