js+css3 轮播

摘要: js轮播卡顿明显，纯css无法控制，通过css3 提升动画性能
没有进行封装

1，css3动画性能高于js动画原因

css3的 transform 属性 将使dom单独为一个层，重渲染时只要改变该层，再合并图层

而js的动画可能同时涉及多个层，当页面复杂时，重渲染非常消耗性能

2，关键代码

transition: all 0.5s ease-out;

所有属性改变进行0.5s的延时变化，使用缓出的缓动公式来进行补间动画

3，所有代码

html：

<div id="slide" class="page page-5">
<div class="slide-box">
<div class="img-box active">
<img src="images1.jpg">
<div class="right-icon"></div>
</div>
<div class="img-box">
<div class="left-icon"></div>
<img src="images2.jpg">
<div class="right-icon"></div>
</div>
<div class="img-box">
<div class="left-icon"></div>
<img src="images3.jpg">
</div>
</div>
<div class="slide-option-box">
<div class="active"></div>
<div class=""></div>
<div class=""></div>
</div>
</div>

css

.page-5{
position: absolute;
top: 400%;
overflow: hidden;

.slide-box{
width: 400%;
transition: all 0.5s ease-out 0s;

.img-box{
width: 25%;
height: 100%;
display: inline-block;

img{
width: 101%;
height: auto;
}
}
}

.left-icon{
position: absolute;
top:45%;
left:5%;
width: 1.3rem;
height: 2.4rem;
background: url('../images/left-icon.png') no-repeat;
background-size: contain;
display: none;
}
.right-icon{
position: absolute;
top:45%;
right:5%;
width: 1.3rem;
height: 2.4rem;
background: url('../images/right-icon.png') no-repeat;
background-size: contain;
display: none;
}

.active{
.left-icon{
display: block;
}
.right-icon{
display: block;
}
}

.slide-option-box{
position: absolute;
top: 90%;
left:48%;

div{
background: url('../images/no_active.png') no-repeat;
background-size: cover;
width: 0.8rem;
height: 0.8rem;
display: inline-block;

&.active{
background: url('../images/active.png') no-repeat;
background-size: cover;
}
}

}
}

js部分

var slide = function(){
var index = 0;
var oldIndex = 0;
var lastIndex = 0;
var width = document.body.clientWidth;
var left = 0;
var dir = 0;
var timeout = 0;
var dom = document.getElementsByClassName('slide-box')[0];
var options = document.getElementsByClassName('slide-option-box')[0].getElementsByTagName('div');
var imgLists = document.getElementsByClassName('img-box');
var leftList = document.getElementsByClassName('right-icon');
var rightList = document.getElementsByClassName('left-icon');

for(var i=0;i<leftList.length;i++){
leftList[i].addEventListener('click',function(){
index = lastIndex;
oldIndex = lastIndex;
slideChange(1,'click');
});
}
for(var i=0;i<rightList.length;i++){
rightList[i].addEventListener('click',function(){
index = lastIndex;
oldIndex = lastIndex;
slideChange(-1,'click');
});
}

function slideChange(k, type){
clearTimeout(timeout);
options[lastIndex].className = '';
imgLists[lastIndex].className = 'img-box';

index += k;
dir = k;

if(index>2){
index = 0;
left = 0;
}

options[index].className = 'active';
imgLists[index].className = 'img-box active';
lastIndex = index;

slideStep();
}
function slideStep(){
left = (index) * width;
dom.setAttribute('style','margin-left:-'+left+'px;');

if(dir > 0){
if(left >= width * (index)){
timeout = setTimeout(function(){
slideChange(1);
},5000);
return;
}
}else{
if(left <= width * (index)){
timeout = setTimeout(function(){
slideChange(1);
},5000);
return;
}
}
}
slideChange(1);
};

slide();