代码的效果可以直接看文章底部的演示地址，之前的滑动幻灯片我写的有一个小小的bug就是当到了最后一个节点，又需要重新回到第一个节点。从最后回到第一个节点。这个过程浪费了时间。并且不友好。现在我每执行一次，就把写个回调函数，DOM操作把第一个放在最后一个，这样就变成无缝幻灯片了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{
margin:0;
padding:0;
}
div{
width: 600px;
height: 300px;
overflow: hidden;
position: relative;
margin:0 auto;
}
ul{
position: absolute;
left:0;
top:0;
}
li{
width: 600px;
height: 300px;
float: left;
}
</style>
</head>
<body>
<div id="zd">
<ul>
<li style="background:#ff00ff"></li>
<li style="background:#ff0010"></li>
<li style="background:#0000ff"></li>
</ul>
</div>
<script>
var oul=$("zd").getElementsByTagName("ul")[0],
oli=oul.getElementsByTagName("li"),
timers=null,
timer=null,
i=0,
oliW=oli[0].offsetWidth;
oul.style.width=oli.length*oliW+"px";
function $(id){
return document.getElementById(id);
}
function getClass(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name]//IE
}else{
return getComputedStyle(obj,false)[name]//IE
}
}
function Stratmove(obj,json,funEnd,callback){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var attr in json){
var bStop=true,
cuur=parseFloat(getClass(obj,attr)),
speed=0;
if(attr=="opacity"){
cuur=Math.round(parseFloat(getClass(obj,attr))*100);
}else{
cuur=parseFloat(getClass(obj,attr));
}
speed=(json[attr]-cuur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cuur!=json[attr]){
bStop=false;
}
if(attr=="opacity"){
obj.style["opacity"]=(cuur+speed)/100;
obj.style["filter"]="alpha(opacity="+cuur+speed+")";
}else{
obj.style[attr]=Math.round(cuur+speed)+"px";
}
if(bStop){
clearInterval(obj.timer);
callback();
}
if(funEnd)funEnd();
}
},30)
}
var arr=[];
timers=setInterval(function(){
Stratmove(oul,{"left":-oliW},null,calls);
},3000);
function calls(){
arr.push(oli[0]);
oul.removeChild(oli[0]);
oul.appendChild(arr[0]);
arr.length=0;
oul.style.left=0;
}
</script>
</body>
</html>
演示地址：http://runjs.cn/detail/crxcxlbo
时间： 2024-10-20 05:41:46