敲代码 - 练习文章 - 在线打字练习（dazi.91xjr.com）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@-webkit-keyframes bian{
from{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(360deg);
}
}
*{
margin: 0px;
padding: 0px;
}
#main{
position: relative;
width: 715px;
height: 530px;
border: 1px solid #CBCBCA;
overflow: hidden;
margin: 0 auto;
}
#tu{
width: 9999px;
height: 530px;
position: absolute;
}
#tu img{
width: 715px;
height: 530px;
float: left;
}
#an{
position: absolute;
width: 100%;
bottom: 15px;
text-align: center;
}
li{
width: 20px;
height: 20px;
border-radius: 50%;
background: #ccc;
list-style: none;
display: inline-block;
}
.active{
background: red;
position: relative;
}
.active span{
width: 2px;
height: 10px;
background: white;
position: absolute;
left: 9px;
transform-origin: bottom;
animation: bian 2.5s linear backwards 1;
}
#xia{
width: 100%;
top: 50%;
margin-top: -30px;
position: absolute;
display: none;
}
#xia a{
width: 30px;
height: 60px;
text-decoration: none;
background: rgba(0,0,0,0.5);
font-size: 30px;
line-height: 60px;
text-align: center;
color: white;
float: left;
}
#xia #you{
float: right;
}
</style>
</head>
<body>
<div id="main">
<div id="tu">
<img src="img/mg1.jpg" alt="" />
<img src="img/mg2.jpg" alt="" />
<img src="img/mg3.jpg" alt="" />
<img src="img/mg4.jpg" alt="" />
<img src="img/mg5.jpg" alt="" />
<img src="img/mg6.png" alt="" />
</div>
<ul id="an">
<li class="btn active"><span></span></li>
<li class="btn"><span></span></li>
<li class="btn"><span></span></li>
<li class="btn"><span></span></li>
<li class="btn"><span></span></li>
<li class="btn"><span></span></li>
</ul>
<ul id="xia">
<a href="#" id="zuo"><</a>
<a href="#" id="you">></a>
</ul>
</div>
<script type="text/javascript">
var main = document.getElementById('main');
var tu = document.getElementById('tu');
var btns = document.getElementsByClassName('btn');
var zuo = document.getElementById('zuo');
var you = document.getElementById('you');
var imgs = document.getElementsByTagName('img');
//按钮自动
var current = 0;
function selectedBtn(current){
document.getElementsByClassName('active')[0].className = 'btn';
btns[current].className = 'btn active';
}
//图片自动
var timer;
function selectedTu(index){
clearInterval(timer);
var currentLeft = tu.offsetLeft;
var img = imgs[index];
var targetLeft = -index*img.offsetWidth;
var start = 0;
var step = 30;
var change = targetLeft - currentLeft;
change = change/step;
timer = setInterval(function(){
start++;
var l = change + tu.offsetLeft;
if(start>=step){
l = targetLeft;
clearInterval(timer);
}
tu.style.left = l + 'px';
},30)
}
//自动播放
var ss = true;
setInterval(function(){
if(ss){
current++;
if(current>=btns.length){
current = 0;
}
selectedTu(current);
selectedBtn(current);
}
},3000);
//鼠标移动事件
for(var i = 0;i<btns.length;i++){
btns[i].index = i;
btns[i].onmouseover = function(){
current = this.index;
if(current>=btns.length){
current = 0;
}
selectedTu(current);
selectedBtn(current);
ss = false;
setTimeout(function(){
ss = true;
},3000)
}
}
//上下也点击事件
zuo.onclick = function(){
if(current<=0){
current = btns.length-1;
}
current--;
selectedTu(current);
selectedBtn(current);
ss = false;
}
you.onclick = function(){
current++;
if(current>=btns.length){
current = 0;
}
ss = false;
selectedTu(current);
selectedBtn(current);
}
//鼠标移进大框
main.onmouseover = function(){
document.getElementById('xia').style.display = 'block';
}
main.onmouseout = function(){
document.getElementById('xia').style.display = 'none';
}
</script>
</body>
</html>