墨竹小院
代码改变世界

用JS实现的一个图片变换小特效

2011-05-26 11:57  MzXy  阅读(378)  评论(0)    收藏  举报

从不废话!

直接上代码

JS代码

 <script type="text/javascript">
 //图片的命名是用的数字！默认是四张图片！需要可以改！ 
 window.onload=function()//文档加载完成时给各个标签注册事件
  { 
   TimeID=setInterval('startplay()',1000) ; //设置样式
   var obj=document.getElementById('div1');//获取对象
   obj.style.backgroundImage='url(1.jpg)';
   obj.style.color='white';
    obj.style.textAlign='right';   
    var demo=document.getElementsByTagName('span'); //获取对象     
    for(var i=0;i<demo.length;i++)
    {
       demo[i].onmouseover=function()
       {
        paly(this);        
       } 
       demo[i].style.backgroundColor='black';
       demo[i].onmouseout=function()
       {
        stop(this);
       }
    }
 }
   var Num=1;
   var TimeID;
 function startplay()
 {if(Num==5){Num=1}else
 {
    document.getElementById('div1').style.backgroundImage='url('+Num+'.jpg)';
    Num++;
 }
 } 
function paly(ite)
{    Num=ite.innerText;
     document.getElementById('div1').style.backgroundImage='url('+ite.innerText+'.jpg)';
     clearInterval(TimeID);    
}
function stop(ite)
{    
     Num=ite.innerText;
     TimeID=setInterval('startplay()',1000); 
}

 </script>

HTML代码

 <html>
 <head>
 <title>测试</title>
 </head>
 <script type="text/javascript" src=""></script>
 <body>
 <div id="div1"  style="width: 350px; height: 250px;" > 
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
 </table>
 </div>
 </body>
 </html>