<script type="text/javascript">
window.onload = function (){
autoMove()
}
var tmer = null ;
var i;
function autoMove(){
var oul = document.getElementById('oul');
var oimg = oul.getElementsByTagName('img');
tmer = setInterval ( function (){
for(i=0;i<oimg.length;i++)
{
move(oimg[i],{opacity:0})
//这样的话它将5 个一并遍历出来,不是我想要的效果,我要的是1 秒种换一张,如何实现呢
}
},1000)
} </script>
window.onload = function (){
autoMove()
}
var tmer = null ;
var i;
function autoMove(){
var oul = document.getElementById('oul');
var oimg = oul.getElementsByTagName('img');
tmer = setInterval ( function (){
for(i=0;i<oimg.length;i++)
{
move(oimg[i],{opacity:0})
//这样的话它将5 个一并遍历出来,不是我想要的效果,我要的是1 秒种换一张,如何实现呢
}
},1000)
} </script>
var tmer = null, i=0, len=0
function autoMove(){
var oul = document.getElementById('oul');
var oimg = oul.getElementsByTagName('img');
len=oimg.length;
i=len-1 ? 0 : i++; //这样试试
tmer = setInterval (
function (){ move(oimg[i],{opacity:0}) },1000
)
}
function (){ move(oimg[i],{opacity:0});
alert (i) // 老是0
}
var oimg = oul.getElementsByTagName('img');这句你是干什么? 你根据这个ID可以获取到多个img???? ,贴你的HTML代码出来看看
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jscript/setMove.js" > </script>
<style type="text/css">
* { padding:0; margin:0 }#oul { width:500px; height:300px; overflow:hidden; position:relative; margin:100px; }#oul li img { width:500px; height:300px; position:absolute; top:0; left:0; filter: alpha( opacity:100);
opacity:1; z-index:0; }
</style>
</head>
<body>
<ul id="oul">
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg"/></li>
</ul>
<script type="text/javascript">
window.onload = function (){
autoMove()
}
var tmer = null ;
var i;
var len;
function autoMove(){
var oul = document.getElementById('oul');
var oimg = oul.getElementsByTagName('img'); tmer = setInterval ( function (){
if(i<oimg.length)
{
move(oimg[i],{ opacity:0})
i++;
}
else
{
i=0;
}
},1000)
} </script>
</body>
</html>
下面是外部move()
// JavaScript Document
function getStyle(obj,attr)
{
if( obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle( obj,false)[attr];
}
}
function move(obj,json,fn){
clearInterval (obj.timer)
obj.timer= setInterval( function()
{
var allStop = true; //所有对象移动停止;
for(attr in json)
{
// 检测对象
var icurr = 0;
if(attr=='opacity')
{
icurr= parseInt(parseFloat(getStyle(obj,attr))*100);
}
else
{
icurr = parseInt(getStyle(obj,attr));
}
//计算速度
var ispeed =(json[attr]-icurr)/8;
ispeed=ispeed>0?Math.ceil(ispeed) : Math.floor(ispeed);
//检测结果
if( icurr != json[attr])
{
allStop = false ;
}
if(attr=='opacity')
{
obj.style.filter = 'alpha(opacity:'+(icurr+ispeed)+')';
obj.style.opacity = (icurr+ispeed)/100 ;
}
else
{
obj.style[attr] =icurr+ispeed +'px';
}
}
if(allStop)
{
clearInterval( obj.timer)
if(fn)
{
fn();
}
}
},30)
}我将js代码改成这样的,全所有的图片一下渐隐,
1楼代码有两个问题:1.三目运算的判断貌似有问题,2.变量i自增位置貌似也放错了,定时函数不是autoMove;var tmer = null, i=0, len=0
var tmer = null, i=0, len=0
function autoMove(){
var oul = document.getElementById('oul');
var oimg = oul.getElementsByTagName('img');
len=oimg.length;
//后面的img在上
i=len-1;
tmer = setInterval (
function (){
move(oimg[i],{opacity:0});
i==0? len-1 : i--; //这样试试
},1000
)
}
如果你只是页面加载后定时调用move函数,就不用再定义一个automove()了;直接在onload里写代码就可以了:var tmer = null, i=0
window.onload = function (){
//autoMove();
var oul = document.getElementById('oul');
var oimg = oul.getElementsByTagName('img');
tmer = setInterval (
function (){
move(oimg[i],{opacity:0});
i++;
if(i==oimg.length){i=0;}
},1000
)
}
可能我在问题的描述上不是很清楚吧,让大家不明白,
我再加了一个索引值,一直循环下去。
下面是最终的JS CODE; var tmer = null ,len,imZindex =0;
window.onload = function (){
//autoMove();
var oul = document.getElementById('oul');
var oimg = oul.getElementsByTagName('img'); len=oimg.length;
//后面的img在上
i=len-1;
tmer = setInterval (
function (){
move(oimg[i],{opacity:0});
oimg[i].style.Zindex =imZindex++;
if(i==0){
i=len-1;
}
else
{
i--;
}
move(oimg[i],{opacity:100});
},2000
)
}