幻灯片轮播~slideshow

最新推荐文章于 2021-03-10 09:25:12 发布

静媛不圆

最新推荐文章于 2021-03-10 09:25:12 发布

阅读量907

点赞数

分类专栏： JavaScript 小程序文章标签：幻灯片图片切换 web前端

本文链接：https://blog.csdn.net/caicaijingyuan/article/details/43033247

版权

JavaScript 小程序专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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 οnlοad="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()" οnclick="yinyong= setInterval(nextimg, 3000);	"> start</a>
</body>
</html>

静媛不圆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
幻灯片轮播~slideshow

无标题文档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
复制链接

扫一扫

专栏目录