您的位置：首页 > Web前端

幻灯片轮播~slideshow

2015-01-22 23:43 441 查看

<!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>
<script language="javascript" type="text/javascript">
var imgarr = new Array("1.png" , "2.png", "3.png");
var index=0;
function preimg()
{

index--;
if(index>=0&& index <imgarr.length)
{
document.bgimg.src=imgarr[index];
}else
{

index = imgarr.length -1;

document.bgimg.src=imgarr[index];
}
}
function nextimg()
{
index++;
if(index> imgarr.length -1)
{
index=0;
document.bgimg.src=imgarr[index];

}
else
{
document.bgimg.src=imgarr[index];
}
}

var yinyong = setInterval(nextimg, 3000);

function stop()
{
clearInterval(yinyong);
}

</script>
</head>

<body onload="yinyong()">
<img name="bgimg" src="1.png" width="400px" height="400px"/>
<div style="position:absolute;left:12px;top:170px;">
<a href="JavaScript:preimg();"><img src="pre.png"/></a>
</div>
<div style="position:absolute;left:340px;top:170px;">
<a href="JavaScript:nextimg();"><img src="next.png" /></a>
</div>
<a href="JavaScript:stop()"> stop</a>
<a href="JavaScript:start()" onclick="yinyong= setInterval(nextimg, 3000);	"> start</a>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 幻灯片图片切换 web前端

相关文章推荐

新的分享

章节导航