您的位置：首页 > 编程语言 > ASP

ASP.NET前台页面实现图片自动播放

2012-04-12 19:42 567 查看

<head runat="server">

<title>无标题页</title>

<script type ="text/javascript" >

function c1() {

setInterval(c2,2000);

}

var i = 1;

function c2()

{

var ou1 = document.getElementByIdx_x('img1');

var ou2 = document.getElementByIdx_x('img2');

var ou3 = document.getElementByIdx_x('img3');

var ou4 = document.getElementByIdx_x('img4');

var ou5 = document.getElementByIdx_x('img5');

switch (i)

{

case 5:

ou1.style.display ="block";

ou2.style.display = "none";

ou3.style.display = "none";

ou4.style.display = "none";

ou5.style.display = "none";

break ;

case 4:

ou1.style.display = "none";

ou2.style.display = "block";

ou3.style.display = "none";

ou4.style.display = "none";

ou5.style.display = "none";

break;

case 3:

ou1.style.display = "none";

ou2.style.display = "none";

ou3.style.display = "block";

ou4.style.display = "none";

ou5.style.display = "none";

break;

case 2:

ou1.style.display = "none";

ou2.style.display = "none";

ou3.style.display = "none";

ou4.style.display = "block";

ou5.style.display = "none";

break;

case 1:

ou1.style.display = "none";

ou2.style.display = "none";

ou3.style.display = "none";

ou4.style.display = "none";

ou5.style.display = "block";

break;

default:

break;

}

i ++;

if (i>5)

{

i =1;

}

}

function changeImage(i)

{

var mImg = document .getElementById ('mainImage');

mImg.src = document .getElementById (i).src;

}

</script>

<style type ="text/css" >

img

{

vertical-align :top ;

}

</style>

</head>

<body onload = "c1()">

<form id="form1" runat="server">

<div style ="width :800px; height :600px">

<img src=\'#\'" /p1.jpg" id = "img1" style ="display:block" width ="800px" height = "600px"/>

<img src=\'#\'" /p2.jpg" id = "img2" style ="display:none" width ="800px" height = "600px"/>

<img src=\'#\'" /p3.jpg" id = "img3" style ="display:none" width ="800px" height = "600px"/>

<img src=\'#\'" /p4.jpg" id = "img4" style ="display:none" width ="800px" height = "600px"/>

<img src=\'#\'" /p5.jpg" id = "img5" style ="display:none" width ="800px" height = "600px"/>

</div>

</form>

</body>

</html>

其中<img src=\'#\'" /p1.jpg" id = "img1" style ="display:block" width ="800px" height = "600px"/>

连接的是本地的图片文件，用的是相对路径

本文出自 “我的博客” 博客，请务必保留此出处http://xhn0311.blog.51cto.com/4497941/832546

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

标签：

相关文章推荐

新的分享

章节导航