<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="always" name="referrer">
<meta name="theme-color" content="#2932e1">
<link href="base.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="screen">
.al{height: 600px; 1000px;position: relative;margin: 30px auto 0;}
.wrap,.num{height: 600px; 1000px;position: absolute;overflow: hidden;cursor: pointer;}
.imgbox{ 10000px;height: 600px;top:0;position: absolute;}
.imgbox li{height: 600px; 1000px;float: left;list-style-type: none;}
.imgbox li img{height: 600px; 1000px;display:inline-block;}
.numbox{height: 30px;300px;position: absolute;bottom: 30px;right: 280px;}
.numbox li{ 15px;height: 15px;font-size: 16px;color: #fff; text-align: center;line-height: 30px;border-radius:50%;float: left;margin-left:10px;background: blue;}
.numbox .select{ 15px;height: 15px;font-size: 16px;color: #fff; text-align: center;line-height: 30px;border-radius:50%;float: left;margin-left:10px;background: red;}
.left,.right{ 41px;height: 69px;position: absolute;display: inline-block;z-index: 9999;}
.left{top:280px;left:0;background:url(images/icon.png)-84px 0 no-repeat;}
.right{top:280px;right:0;background:url(images/icon.png)-125px 0 no-repeat;}
.left:hover{background: url(images/icon.png)0 0 no-repeat;}
.right:hover{background: url(images/icon.png)-43px 0 no-repeat;}
</style>
</head>
<body>
<div class="al" id="al">
<a href="#" class="left" id="left"></a>
<a href="#" class="right" id="right"></a>
<div class="wrap" id="wrap">
<ul class="imgbox" id="imgbox">
<li><img src="images/bg5.jpg" alt="" /></li>
<li><img src="images/bg1.jpg" alt="" /></li>
<li><img src="images/bg2.jpg" alt="" /></li>
<li><img src="images/bg3.jpg" alt="" /></li>
<li><img src="images/bg4.jpg" alt="" /></li>
<li><img src="images/bg5.jpg" alt="" /></li>
<li><img src="images/bg1.jpg" alt="" /></li>
</ul>
</div>
<div class="num">
<ul class="numbox" id="numbox">
<li index="0" class="select"></li>
<li index="1"></li>
<li index="2"></li>
<li index="3"></li>
<li index="4"></li>
</ul>
</div>
</div>
<script>
window.onload=function(){
var index=0;
var timer=null;
var al=document.getElementById('al');
var oleft=document.getElementById('left');
var oright=document.getElementById('right');
var oimgbox=document.getElementById('imgbox');
var imglis=oimgbox.getElementsByTagName('li');
var onumbox=document.getElementById('numbox');
var numlis=onumbox.getElementsByTagName('li');
var wid=imglis[0].offsetWidth;
var hei=imglis[0].offsetHeight;
var animated=false;
var interval=3000;
oimgbox.style.left=-1000+'px';
function showbtn(){
for(var i=0;i<numlis.length;i++){
if(numlis[i].className=='select') {
numlis[i].className='';
break;
}
}
numlis[index].className='select';
}
oleft.onclick=function(){
if(animated){
return;
}
if(index==0){
index=numlis.length;
}
index--;
change(1000);
showbtn();
}
oright.onclick=function(){
if(animated){
return;
}
index++;
if(index==numlis.length){
index=0;
}
change(-1000);
showbtn();
}
function change(offset){
if(offset==0){
return;
}
animated=true;
var time=800;
var inte=10;
var speed=offset/(time/inte);
var left=parseInt(oimgbox.style.left)+offset;
var go=function(){
if((speed>0&&parseInt(oimgbox.style.left)<left)||(speed < 0 && parseInt(oimgbox.style.left) > left)){
oimgbox.style.left=parseInt(oimgbox.style.left)+ speed +'px';
setTimeout(go,inte);
}
else{
oimgbox.style.left=left+'px';
if(left<-5000){
oimgbox.style.left=-1000 + 'px';
}else if(left>-1000){
oimgbox.style.left=-5000 + 'px';
}
animated=false;
}
}
go();
}
function autoplay(){
timer=setTimeout(function(){
oright.onclick();
autoplay();
},interval);
}
function stop(){
clearTimeout(timer);
}
for(var j=0;j<numlis.length;j++){
numlis[j].onclick=function(){
if(animated){
return;
}
if(this.className=='select'){
return;
}
var myindex=parseInt(this.getAttribute('index'));
var offset=-1000 * (myindex-index);
console.log(myindex);
change(offset);
index=myindex;
showbtn();
}
}
autoplay();
al.onmouseover = function(){
clearTimeout(timer);
}
al.onmouseout = autoplay;
}
</script>
</body>
</html>