<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin: 0;
list-style: none;
}
#wrap{
590px;
height:340px;
border:1px solid #000;
margin: 50px auto;
position: relative;
}
#wrap a{
30px;
height: 30px;
line-height: 30px;
background: #000;
opacity: 0.3;
filter: alpha(opacity=30);
text-align: center;
text-decoration: none;
color:#fff;
font-size: 16px;
position: absolute;
top: 150px;
}
#wrap #prev{
left:0;
}
#wrap #next{
right:0;
}
#wrap ol{
position: absolute;
bottom:10px;
left:50%;
margin-left: -50px;
}
#wrap ol li{
15px;
height:15px;
border-radius: 50%;
float: left;
margin-left: 5px;
background: #fff;
}
#wrap ol li.active{
background: red;
}
#wrap ul{
590px;
height:auto;
position: absolute;
left:0;
}
#wrap ul li{
590px;
height:340px;
position: absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="box">
<li><img src="img/1.jpg" alt=""/></li>
<li><img src="img/2.jpg" alt=""/></li>
<li><img src="img/3.jpg" alt=""/></li>
<li><img src="img/4.jpg" alt=""/></li>
<li><img src="img/5.jpg" alt=""/></li>
</ul>
<a id="prev" href="javascript:;">←</a>
<a id="next" href="javascript:;">→</a>
<ol id="btn">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
//这里引用了一个封装好的运动框架
<script src="move1.js"></script>
<script>
window.onload=function(){
var wrap=document.getElementById("wrap");
var box=document.getElementById("box");
var aLi=box.getElementsByTagName("li");
var aBtn=document.getElementById("btn").getElementsByTagName("li");
var next=document.getElementById("next");
var prev=document.getElementById("prev");
var timer=null;
var iNow=0;
function demo(){
for(var i=0;i<aBtn.length;i++){
aBtn[i].className='';
move(aLi[i],{opacity:0});
}
move(aLi[iNow],{opacity:1});
aBtn[iNow].className="active";
}
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].onclick=function(){
iNow=this.index;
demo();
}
}
next.onclick=oNext;
function oNext(){
iNow++;
if(iNow==aLi.length)
iNow=0;
demo();
}
prev.onclick=function(){
iNow--;
if(iNow==-1)
iNow=aLi.length-1;
demo();
};
timer=setInterval(oNext,2000);
wrap.onmouseover=function(){
clearInterval(timer);
};
wrap.onmouseout=function(){
timer=setInterval(oNext,2000);
}
}
</script>
//js封装库
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
//complete-->{}:{time:500,ease:ease-in,fn:}
function move(obj,json,complete){
clearInterval(obj.timer);
complete=complete || {};
complete.time=complete.time || 1000;
complete.ease=complete.ease || "linear";
var start={}; //开始的位置
var dis={}; //距离
for(var name in json){
start[name]=parseFloat(getStyle(obj,name)); //开始的位置
dis[name]=json[name]-start[name]; //距离
}
var count=Math.floor(complete.time/30); //次数
var n=0; //当前的的次数
obj.timer=setInterval(function(){
n++;
for(var name in json){
switch (complete.ease){
case "linear": //匀速
var a=n/count;
var cur=start[name] + dis[name]*a;
break;
case 'ease-in': //加速
var a=n/count;
var cur=start[name] + dis[name]*a * a * a;
break;
case 'ease-out': //减速
var a=1-n/count;
var cur=start[name] + dis[name]*(1-a * a * a);
break;
}
if(name=="opacity"){ //透明度
obj.style.opacity=cur;
obj.style.filter="alpha(opacity:"+cur*100+")";
}else{
obj.style[name]=cur + "px";
}
}
if(n==count){
clearInterval(obj.timer);
complete.fn && complete.fn();
}
},30)
}