从不废话!
直接上代码
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>