今天练习一下DOM操作，顺便熟悉熟悉函数，做了一个轮播图，经过测试，效果还不错！
直接放上源码，供大家参考！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding:0;
margin: 0;
}
div{
position: relative;
width: 800px;
height: 400px;
margin: 100px auto 0 auto;
}
#view{
width: 800px;
height: 400px;
margin: 0 auto;
border: 1px solid #000;
}
img{
width: 800px;
display: none;
}
#dote{
position: absolute;
bottom:40px;
left:350px;
}
#dote li{
list-style: none;
margin: 0 5px;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #dedede;
float: left;
}
#left{
position: absolute;
background-color: #333333;
color: white;
font-size: 60px;
top:180px;
left:10px;
padding: 10px 10px;
opacity: 0.5;
border: none;
}
#right{
position: absolute;
background-color: #333333;
color: white;
font-size: 60px;
top:180px;
right:10px;
padding: 10px 10px;
opacity: 0.5;
border: none;
}
#right:hover{
background-color: #999999;
}
#left:hover{
background-color: #999999;
}
</style>
</head>
<body>
<div>
<main id="view">
<img src="0.jpg" alt="#">
<img src="1.jpg" alt="#">
<img src="2.jpg" alt="#">
<img src="3.jpg" alt="#">
<img src="4.jpg" alt="#">
<img src="5.jpg" alt="#">
</main>
<ul id="dote">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<button id="left" onclick="prev()"><</button>
<button id="right" onclick="nex()">></button>
</div>
</body>
<script>
var view=document.getElementById('view');
var dote=document.getElementById('dote');
var x=0;
view.children[x].style.display='block';
dote.children[x].style.backgroundColor='green';
function prev(){
view.children[x].style.display='none';
dote.children[x].style.backgroundColor='#dedede';
x==0?x=dote.children.length :null;
x--;
view.children[x].style.display='block'
dote.children[x].style.backgroundColor='green';
}
function nex(){
view.children[x].style.display='none';
dote.children[x].style.backgroundColor='#dedede';
x==dote.children.length-1?x=-1:null;
x++;
view.children[x].style.display='block';
dote.children[x].style.backgroundColor='green';
}
//tab 切换
for(var j=0;j<dote.children.length;j++){
dote.children[j].index=j //为每个圆点添加索引值，以便获取调用
dote.children[j].onclick=function (){
view.children[x].style.display='none';
dote.children[x].style.backgroundColor='#dedede';
x=this.index; //当前圆点索引值付给x
view.children[x].style.display='block';
this.style.backgroundColor='green';
}
}
setInterval(nex,1000)
</script>
</html>
网友评论