无缝切换效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
*{margin: 0;padding: 0;}
li{list-style: none;}
ul{position: absolute;}
li{width: 100px;height: 100px;float: left;text-align:center;line-height: 100px;box-sizing: border-box;border:1px solid red;}
#box{width: 400px;height: 100px;overflow: hidden;position: relative;border:1px solid blue;margin:20px auto;}
.clearfix:after{display:block;content:".";height: 0;visibility:hidden;clear:both;}
div.box2{width: 400px;margin: 0 auto;}
</style>
</head>
<body>
<div id="box">
<ul id="list" class="clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="box2">
<button id="btn" class="btn btn-primary btn-block">切换</button>
</div>
<script src="animate.js"></script>
<script>
var box=document.getElementById("box");
var li=document.getElementsByTagName("li");
var ul=document.getElementById("list");
var btn=document.getElementById("btn");
var iTrue=true;
function getWidth(){
ul.style.width = li.length*(li[0].offsetWidth) + 'px';
}
getWidth();
btn.onclick=function(){
if(iTrue){
iTrue=false;
for(var i=0;i<4;i++){
var oli=li[i].cloneNode(true);
ul.appendChild(oli);
getWidth();
}
}
ul.animate({"left":"-400px"},function(){
for(var i=0;i<4;i++){
ul.removeChild(li[0]);
ul.style.left=0;
}
iTrue=true;
});
}
</script>
</body>
</html>
引用的animate方法：
Element.prototype.animate=animate;
Element.prototype.getStyle=getStyle;
function animate(json,callback) {
clearInterval(this.timer);
for (var attr in json) {
var that = this;
this.timer = setInterval(function () {
if (attr == 'opacity') {
that.icur = Math.round(parseFloat(that.getStyle()[attr]) * 100);
} else {
that.icur = parseInt(that.getStyle()[attr]);
}
that.speed = (parseInt(json[attr]) - that.icur) / 10;
that.speed = that.speed > 0 ? Math.ceil(that.speed) : Math.floor(that.speed);
if (attr == 'opacity') {
that.style.filter = 'alpha(opacity:' + that.icur + that.speed + ')';
that.style.opacity = (that.icur + that.speed) / 100;
} else {
that.style[attr] = that.icur + that.speed + "px";
};
if(that.icur==parseInt(json[attr])){
//flags=true;
clearInterval(that.timer);
if(callback){
callback();
}
}
}, 20);
}
}
function getStyle() {
if (this.currentStyle) {
return this.currentStyle;
} else {
return document.defaultView.getComputedStyle(this, null);
}
}
