简单的原生js轮播图
以下是js的缓冲函数封装；
//调用id
function $(id){
return document.getElementById(id);
};
//缓冲函数
function move(obj,target,ratio,fn){
clearInterval(obj.times);
obj.times=setInterval(function (){
//假设全部执行完
var wen=true;
for(var key in target){
//计算当前属性
if(key==='opacity'){
var cur=getStyle(obj,'opacity')*100;
}else{
var cur=parseInt(getStyle(obj,key))||0;
};
//计算速度
var speed=(target[key]-cur)/ratio;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//计算下次值
var next=cur+speed;
//赋值
if(key==='opacity'){
obj.style.opacity=next/100;
}else{
obj.style[key]=next+'px';
}
if(next!==target[key]){
wen=false;
}
};
if(wen===true){
clearInterval(obj.times);
//执行回调函数
if(fn) {
fn();
}
};
},50);
};
这一步为获取实际样式；
function getStyle(obj,key){
if(obj.currentStyle){
return obj.currentStyle[key];
}else{
return getComputedStyle(obj,null)[key];
}
};
、、、、、、、、、、、、、、、、
样式加内容
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
img{
vertical-align: bottom;
}
a{
text-decoration: none;
}
#box{
width:830px;
height: 440px;
margin: 50px auto;
position: relative;
overflow:hidden;
}
#list{
width: 3320px;
height: 440px;
position: absolute;
}
#list li{
float: left;
}
#btnleft{
width: 50px;
line-height: 60px;
text-align: center;
position: absolute;
left: 0;
top:40%;
font-size: 24px;
color: white;
background: #6666;
opacity: .9;
z-index: 1;
}
#btnright{
width: 50px;
line-height: 60px;
text-align: center;
position: absolute;
left:780px;
top:40%;
font-size: 30px;
color: white;
background: #6666;
opacity: .4;
z-index: 1;
}
#sbtn{
position: absolute;
bottom: 0;
left:48%;
}
#sbtn a{
display: inline-block;
width: 15px;
height: 15px;
background: skyblue;
border-radius: 50%;
}
#sbtn .active{
background: greenyellow;
}
</style>
</head>
<body>
<div id="box">
<div id="btnleft"><</div>
<div id="btnright">></div>
<ul id="list">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
</ul>
<div id="sbtn">
<a class="active" href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
<script type="text/javascript" src="huanchong.js" ></script>
<script>
//获取ID名
var box=$('box');
var list=$('list');
var oli=list.children;
var btnleft=$('btnleft');
var btnright=$('btnright');
var sbtn=$('sbtn');
var btna=Array.from(sbtn.children);
var index=0;
var kuan=830;
var sindex=0;
var times=null;
//右
btnright.onclick=function(){
index++;
if(index>=oli.length){
index=1;
list.style.left=0;
}
move(list,{left:-index*kuan},10);
sindex++;
if(sindex>=btna.length){
sindex=0;
}
btna.forEach(function(v,k){
v.classList.remove('active');
})
btna[sindex].classList.add('active');
};
//左
btnleft.onclick=function(){
index--;
if(index<0){
index=oli.length-2;
list.style.left=-(oli.length-1)*kuan+'px';
}
move(list,{left:-index*kuan},10);
sindex--;
if(sindex<0){
sindex=btna.length-1;
}
btna.forEach(function(v,k){
v.classList.remove('active');
})
btna[sindex].classList.add('active');
};
list.innerHTML+=oli[0].outerHTML;
list.style.width=oli.length*kuan+'px';
//划过小图标
btna.forEach(function(v,k){
v.onclick=function(){
btna.forEach(function(n){
n.classList.remove('active');
});
btna[k].classList.add('active');
index=k;
move(list,{left:-index*kuan},10);
}
})
</script>
