/*代码与html分离，简单易懂，可读性高*/
<!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>
</head>
<style type="text/css">
#tupianlunhuan {
position:absolute;
width: 250px;
height: 150px;
border: 1px solid #000;
}
#ifocus_tx { position:relative; width: 240px; height: 20px;left:8px; top:125px;}
#div1,#div2,#div3{width:250px; height:150px;}
ul { list-style:none;}
</style>
<script type="text/javascript">
var NowFrame = 1; //初始化显示第几张
var MaxFrame = 3; //最大显示几张
function show() {
for (var i=1; i < (MaxFrame + 1); i++) {
if (i == NowFrame)
{
document.getElementById('div' + NowFrame).style.display = '';
document.getElementById('li' + NowFrame).style.display = '';
}
else
{
document.getElementById('div' + i).style.display = 'none';
document.getElementById('li' + i).style.display = 'none';
}
}
{
if (NowFrame == MaxFrame) //定义下一张显示的图片
NowFrame = 1;
else
NowFrame++;
}
theTimer = setTimeout('show()', 5000); //设置定时器，显示下一张显示的图片
}
function stoptime( )
{
clearTimeout(theTimer);
}
function stact()
{
theTimer = setTimeout('show()', 2000);//防止onmouseout带来的瞬间变化
}
</script>
</head>
<body οnlοad="show();">
<div id="tupianlunhuan" onMouseOver="stoptime();" οnmοuseοut="stact();">
<img alt="" src="../image/5.jpg" id="div1" />
<img alt="" src="../image/1.jpg" id="div2" />
<img alt="" src="../image/3.jpg" id="div3" />
</div>
<div id="ifocus_tx">
<ul>
<li id="li1">你好呀</li>
<li id="li2">我还好</li>
<li id="li3">你呢？</li>
</ul>
</div>
</body>
</html>
241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
