上一篇写了一个无缝幻灯片。但是一个朋友说。我那个只适合做纯效果。如果在上面有一些操作，就会报错。
比如说:oul.getElementsByTagName(“li”)[0].这个时候没3秒钟返回的节点是一样的。在变化。针对这个需求，我就重新了一个。希望对大家有帮助。
<!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;
}
li.text{
position: absolute;
top:0;
}
</style>
</head>
<body>
<div id="zd">
<ul>
<li style="background:#ff00ff" data-index="0"></li>
<li style="background:#ff0010" data-index="1"></li>
<li style="background:#0000ff" data-index="2"></li>
</ul>
</div>
<script>
var timer=null;
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,call){
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);
if(call)call();
}
if(funEnd)funEnd();
}
},30)
}
var oul=$("zd").getElementsByTagName("ul")[0],
oli=oul.getElementsByTagName("li"),
u=0,
oliW=oli[0].offsetWidth;
for (var i = 0; i < oli.length; i++) {
oli[i].className="text";
oli[i].style.left=oliW*i+"px";
};
var timersd=setInterval(function(){
for (var i = 0; i < oli.length; i++) {
calls(i);
var oliL=oli[i].offsetLeft;
if(oliL%oliW==0){
Stratmove(oli[i],{"left":oliL-oliW},null);
}
};
},3000)
function calls(z){
var oliL=oli[z].offsetLeft;
if(oli[z].offsetLeft==-oliW){
oli[z].style.left=oliW*(oli.length-1)+"px";
}
}
</script>
</body>
</html>
演示地址:http://runjs.cn/detail/ivpslp2r
时间： 2024-10-06 16:23:52