87,992
社区成员
发帖
与我相关
我的任务
分享js遍历的问题
<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>
...全文
请发表友善的回复…
发表回复
zaiwhere 2012-12-17
- 打赏
- 举报
已经解决，用六楼的方法，
可能我在问题的描述上不是很清楚吧，让大家不明白，
我再加了一个索引值，一直循环下去。
下面是最终的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
)
}
toury 2012-12-16
- 打赏
- 举报
确实有问题。
如果你只是页面加载后定时调用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
)
}
lzdxppp 2012-12-15
- 打赏
- 举报
把1楼的代码改了改，你试试：
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
)
}
zaiwhere 2012-12-15
- 打赏
- 举报
我遇到的问题是无法分开 对move()的调用 ，初学
zaiwhere 2012-12-15
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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)
}
ILOVE_ASPNET 2012-12-15
- 打赏
- 举报
var oul = document.getElementById('oul'); 获取ID为oul这个对象
var oimg = oul.getElementsByTagName('img');这句你是干什么？ 你根据这个ID可以获取到多个img???? ,贴你的HTML代码出来看看
zaiwhere 2012-12-15
- 打赏
- 举报
还是不行，没有任何效果
function (){ move(oimg[i],{opacity:0});
alert (i) // 老是0
}
toury 2012-12-14
- 打赏
- 举报
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
)
}
