Js实现图片的动态效果

DOCTYPE html >

lang= "en" >

   charset= "UTF-8" >

  

   type= "text/javascript" >

window. onload= function()

{

var arr= new Array( '/RUNNER0.JPG', '/RUNNER1.JPG', '/RUNNER2.JPG', '/RUNNER3.JPG', '/RUNNER4.JPG', '/RUNNER5.JPG');

var img= document. getElementsByTagName( 'img')[ 0];

var btns= document. getElementsByTagName( "button");

var index= 0;

var speed= document. getElementById( "speed");

//跑步函数

function run()

{

index++;

if( index>= arr. length)

index= 0;

img. src= "img"+ arr[ index];

}

var objc= null;

speed. onchange= function()

{

//获取你选中的速度

var sd= this. options[ this. selectedIndex]. value;

clearInterval( objc);

objc= setInterval( function(){

run();

}, sd);

}

btns[ 0]. onclick= function()

{

clearInterval( objc);

  objc= setInterval( function(){

  run();

  }, 500);

}

}

   < /script>

开始

暂停

id= "speed" >

100

50

10

   src= "img/RUNNER0.JPG" >

//图片文件我这里就暂时不导入了，同学们可以自己去放一些动态的图片实现这种效果