| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 710 人关注过本帖
标题:js 结果不循环怎么回事,不能实现走马灯的效果
只看楼主 加入收藏
sishuijiaoya
Rank: 1
等 级:新手上路
帖 子:2
专家分:0
注 册:2014-8-18
结帖率:0
收藏
 问题点数:0 回复次数:5 
js 结果不循环怎么回事,不能实现走马灯的效果
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title></title>
    <style>
        #picture{
            height:400px;
            width:400px;
            line-height: 400px;
            margin:0 auto;
           overflow: hidden;
          }
    </style>

</head>
<body onload="setTimeout()">
<div id="picture">
    <img src="./1.jpg" id="tu" alt=""/>
</div>
<script type="text/javascript">
   var a=['./1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg'];
    var i=0;
     function huan(){
         if(i== a.length-1){
             i=0;
         }
         else{
             i++
         }
         document.getElementById("tu").src=a[i];
         setTimeout(huan(),3000);
     }



</script>

</body>
</html>
搜索更多相关主题的帖子: hidden content title javascript style javascript content hidden style title 
2014-08-19 20:16
欧阳振永
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2014-8-19
收藏
得分:0 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title></title>
    <style>
        #picture{
            height:400px;
            width:400px;
            line-height: 400px;
            margin:0 auto;
           overflow: hidden;
          }
    </style>

</head>
<body onload="setTimeout()">
<div id="picture">
    <img src="1.jpg" id="tu" alt=""/>
</div>
<script type="text/javascript">
   var a=['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg'];
    var i=0;
  function  huan(){
         if(i== a.length-1){
             i=0;
         }
         else{
             i++
         }

         document.getElementById("tu").src=a[i];
      
     }

 setInterval(huan,3000);

</script>

</body>
</html>


正确代码

欧阳
2014-08-19 21:40
Paxster
Rank: 5Rank: 5
来 自:湖北武汉
等 级:职业侠客
威 望:3
帖 子:40
专家分:320
注 册:2014-7-18
收藏
得分:0 
setTimeout()只能执行一次huan()函数,需要换成setinterval(),可以不停的执行该函数;其次,不能在huan()函数内部调用定时器,需要在外部调用huan()函数。楼上的代码是对的。吐槽一句,楼主的这种写法已经out很多年了...

念念不忘,必有回响。
2014-08-22 09:51
渴望做梦
Rank: 1
等 级:新手上路
威 望:1
帖 子:45
专家分:1
注 册:2014-12-24
收藏
得分:0 
回复 3楼 Paxster
如果我写,估计也这么写,现在都用什么新的方法写啊?
2015-02-11 16:50
冰镇柠檬汁儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:北京
等 级:版主
威 望:120
帖 子:8078
专家分:6657
注 册:2005-11-7
收藏
得分:0 
方式一:
var a = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg'], i = 0;
var timer = setInterval(function () {
    i++;
    document.getElementById("tu").src = a[i];
    if (i >= a.length - 1) {
         clearTimeout(timer);
    }
}, 3000);
方式二:
var a = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg'], i = 0;
function setNewInterval() {
    i++;
    document.getElementById("tu").src = a[i];
    if (i < a.length) {
        setTimeout(arguments.callee, 1000);
    }
};
setTimeout(setNewInterval, 1000);
这两种方式第二种现在比较流行,因为setTimeout不用监控超时调用id,另外,多个setInterval的时候,不能准确预估哪个先启动,可能造成不可知的结果
代码只是随手写的,不一定正确,大概意思是这样的

本来无一物,何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!
2015-03-11 15:33
快速回复:js 结果不循环怎么回事,不能实现走马灯的效果
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.017343 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved