<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
a{text-decoration:none;}
#box{
width: 800px;
height: 400px;
margin: 40px auto;
position: relative;
overflow:hidden;
}
ul,li{
list-style:none;
}
#box>ul{
position: absolute;
}
#box ul li{
width: 800px;
height: 400px;
float: left;
}
#box ul li img{
width: 800px;
height: 400px;
}
#direction{
position:relative;
}
#direction>a{
width: 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;
width: 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="https://pic.kuaizhan.com/g3/22/0b/4bea-7962-4826-9500-206a3854fc4133/imageView/v1/thumbnail/640x0" alt=""></li>
<li><img src="https://pic.kuaizhan.com/g3/7a/14/c501-c458-4f9d-84d9-69c6e4f294d204/imageView/v1/thumbnail/640x0" alt=""></li>
<li><img src="https://pic.kuaizhan.com/g3/c7/06/7422-de98-43dd-b4fc-4dac60c6adb403/imageView/v1/thumbnail/640x0" alt=""></li>
<li><img src="https://pic.kuaizhan.com/g3/04/cd/743b-e472-4451-a787-261861174a5634/imageView/v1/thumbnail/640x0" alt=""></li>
</ul>
<div id="direction">
<a href="##"><</a>
<a href="##">></a>
</div>
<div id="btn">
<a href="" class="active"></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>
</div>
<script>
//获取非行间样式
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
//完美运动框架
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)+")"
}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;
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){
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";
console.log(1)
}else{
iNow++;
console.log(2)
}
toImg();
}
//当鼠标移入box时清除定时器
box.onmouseover=function(){
clearInterval(timer);
}
//当鼠标移出box时再自动轮播
box.onmouseout=function(){
autoPlay();
}
</script>
</body>
</html>
网友评论