码迷,mamicode.com
首页 > Web开发 > 详细

JS定时器切换图片

时间:2017-06-17 17:15:18      阅读:325      评论:0      收藏:0      [点我收藏+]

标签:color   set   on()   cti   png   round   margin   uri   bsp   

<!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>

 


<style>
    body{background:#000000;text-align:center;}
    h1{margin:40px;color:#FFFFFF;font-weight:bold;}
    hr{color:#FFFFFF;margin:20px;}
    #Bos{width:500px;height:200px;margin:100px auto;}
</style>

 


<script>
window.onload=function(){
        var curIndex=0;
        var arr=new Array();
        arr[0]="image/img_1.jpg";            
        arr[1]="image/img_2.jpg";
        arr[2]="image/img_3.jpg";
        var img=document.getElementById(‘img‘);
        
        setInterval(ma,1000);             //定时器
        
        function ma()
        {
            
            if(curIndex==arr.length-1)
            {
                curIndex=0;
            }    
            else
            {
                curIndex+=1;
            }
            
            img.src=arr[curIndex];
        }
}
        
</script>
</head>

<body>
    <h1>图片自动切换</h1>
    <hr />
    <div id="Bos">
        <img src="JavaScript/image/img_1.jpg" id="img" style="width:500px;height:200px;"/>
    </div>
</body>
</html>

 

 

技术分享

 

JS定时器切换图片

标签:color   set   on()   cti   png   round   margin   uri   bsp   

原文地址:http://www.cnblogs.com/xiaoyangtian/p/7040374.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!