<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
a{text-decoration:none;}
#box{
800px;
height: 400px;
margin: 40px auto;
position: relative;
overflow:hidden;
}
ul,li{
list-style:none;
}
#box>ul{
position: absolute;
}
#box ul li{
800px;
height: 400px;
float: left;
}
#box ul li img{
800px;
height: 400px;
}
#direction{
position:relative;
}
#direction>a{
50px;
height: 60px;
background: rgba(0,0,0,0.5);
color:#fff;
position:absolute;
top:170px;
font-size:30px;
text-align:center;
line-height:60px;
}
#direction>a:nth-child(2){
right:0;
}
#btn{
position:absolute;
left:42%;
bottom:0;
}
#btn>a{
float:left;
20px;
height:20px;
border-radius:50%;
background:#f40;
margin-right:10px;
}
#btn .active{
background:#fff;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="c1.jpg" alt=""></li>
<li><img src="c2.jpg" alt=""></li>
<li><img src="c3.jpg" alt=""></li>
<li><img src="c4.jpg" alt=""></li>
<li><img src="c5.jpg" alt=""></li>
</ul>
<div id="direction">
<a href="javascript:;"><</a>
<a href="javascript:;">></a>
</div>
<div id="btn">
<a href="" class="active"></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>
</div>
<script>
//获取非行间样式
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];// currentStyle：适用于IE、Opera。
}else{
return getComputedStyle(obj,false)[attr];//getComputedStyle：适用于FireFox、Chrome、Safari。
}
}
//完美运动框架
function move(obj,json,fn){
clearInterval(obj.timer);//
obj.timer = setInterval(function(){
var bStop = true;
for(var attr in json){
//先判断是否是透明度
var iCur;
if(attr == "opacity"){
iCur = parseInt(parseFloat(getStyle(obj,attr))*100);
}else{
iCur = parseInt(getStyle(obj,attr));
}
//算速度
var speed = (json[attr] - iCur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(json[attr] != iCur){
bStop = false;
}
if(attr == "opacity"){
obj.style.opacity = (iCur+speed)/100;
obj.style.filter = "alpha(opacity:"+(iCur+speed)+")";//filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。
}else{
obj.style[attr] = iCur+speed+'px';
}
}
if(bStop){
clearInterval(obj.timer);
fn&&fn();
}
},30)
}
</script>
<script type="text/javascript">
var oBox=document.getElementById("box");//显示框
var ul=document.getElementById("box").getElementsByTagName("ul")[0];
var aLi=document.getElementById("box").getElementsByTagName("li");
var aDir=document.getElementById("direction").getElementsByTagName("a");//左右切换
var aBtn=document.getElementById("btn").getElementsByTagName("a");//标签按钮
var iw=aLi[0].offsetWidth;//offset是元素相对父元素的偏移宽度，返回对象的padding+border+width属性值之和
var len=aLi.length;//有多少张图片
var iNow=0;//按钮标识
var timer;
//鼠标移入进度条时颜色改变
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;//给每个按钮加个下标
aBtn[i].onmouseover=function(){
//把所有按钮样式清空
for(var j=0;j<aBtn.length;j++){
aBtn[j].className="";
}
//给当前按钮设置样式
this.className="active";
//图片也跟随到相应的位置
move(ul,{left:-iw*(this.index)});
iNow=this.index;
}
}
//最后面插入一张图片
var li=aLi[0].cloneNode(true);
ul.appendChild(li);
ul.style.width=iw*aLi.length+"px";
//动画原理
function toImg(){
move(ul,{left:-iw*iNow});
for(var i=0;i<aBtn.length;i++){
aBtn[i].className="";
}
aBtn[iNow==aLi.length-1? 0: iNow].className="active";
}
//无缝播放
function autoPlay(){
timer=setInterval(function(){
if(iNow==aLi.length-1){//移动到最后一张，标识变为1，显示第二张图片
iNow=1;
ul.style.left=0+"px";
}else{
iNow++;
}
toImg();
},2000)
}
autoPlay();
//点击左边按钮
aDir[0].onclick=function(){
console.log(iNow)
if(iNow==0){
iNow=aLi.length-2;
ul.style.left=-(aLi.length-1)*iw+"px";
}else{
iNow--;
}
toImg();
}
//点击右边按钮
aDir[1].onclick=function(){
if(iNow==aLi.length-1){
iNow=1;
ul.style.left=0+"px";
}else{
iNow++;
}
toImg();
}
//当鼠标移入box时清除定时器
box.onmouseover=function(){
clearInterval(timer);
}
//当鼠标移出box时再自动轮播
box.onmouseout=function(){
autoPlay();
}
</script>
</body>
</html>