100分，求实现图片自动播放功能！

Question

图片是从数据库中取的，其中包括图片大小和路径以及一些其他信息，
      点PLAY按钮实现图片播放，点STOP实现停止播放！
    请问高手，这个功能怎么实现啊？给点思路也可以的！

Answer 1

你说的是什么意思？你的图片和视频一样可以播放？
还是播放gif？
还是好几个图片类似幻灯片那样放？

Answer 2

你想实现的到底是什么？如果图片像幻灯片那样，连续的一直往右走或者是往左走，可以用HTML里面的一个语句实现滚动的那种，一张一张换的那样，可以用GIF动画之类的或者用函数控制IMG，关于怎么从数据库读出图片，建议去看小山的博客。

Answer 3

namespace WholeMarket.FarmProduce.Info.Web.Util
{
using System;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls; /// <summary>
/// 滚动显示的特色产品图片链，首页显示。
/// </summary>
public class HotProductViewer : Control
{
protected System.Web.UI.HtmlControls.HtmlTableCell tdInfo;
protected readonly int PicWidth = 100; //显示图片的宽度
protected readonly int PicHeight = 75; //显示图片的高度 #region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器
/// 修改此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load); }
#endregion

private void Page_Load(object sender, System.EventArgs e)
{
if(!this.ShowInfo())
{
this.Visible = false;
}
} /// <summary>
/// 以滚动图片链的形式显示特色产品信息。
/// </summary>
private bool ShowInfo()
{
System.Data.DataTable dt = null;
Information.Data.Access.Accessor acc = ((WebPage)(this.Page)).WebSession.DbEnvironment.CreateAccessor();

//找到前N条图片属性不为空的特色产品记录，在首页滚动显示。
string SQL = "Select TOP 10 PID, NAME, IsNull(ABSTRACT,'') as ABSTRACT, IMAGEPATH From CUST.ESPPRODUCTS Where IMAGEPATH Is Not Null ORDER BY IMAGEPATH DESC";

try
{
dt = (System.Data.DataTable)acc.Query(SQL, Information.Data.Access.ResultType.DataTable);
}
catch
{
return false;
} if(dt.Rows.Count < 1)
return false;

//输出html，限制层的最大宽度为500
string html = "<div align='center' id='divDemo' style='overflow:hidden;height:80px;width:" + (dt.Rows.Count > 5 ? 5 : dt.Rows.Count) * PicWidth + "px;'>";
html += "<table align='center' cellpadding='0' cellspace='0' border='0' valign='bottom'>";
html += "<tr><td id='tdPic1' valign='middle'>";
html += "<table width='100%'><tr>";
for(int i = 0; i< dt.Rows.Count; i++)
{
string path = dt.Rows[i]["IMAGEPATH"].ToString() == "" ? "Images/Product/NoProduct.jpg" : ("Images/Product/" + dt.Rows[i]["IMAGEPATH"].ToString());
html += "<td><a href='" + this.TopVirtualUrl + "/Products.aspx?ID=" + dt.Rows[i]["PID"].ToString() + "' target='_blank' ";
html += "Title='" + (dt.Rows[i]["NAME"].ToString() + "(" + dt.Rows[i]["ABSTRACT"].ToString() + ")") + "'>";
html += "<img src='" + path + "' border='0' width='" + PicWidth + "' height='" + PicHeight + "'></a> ";
}
html += "<tr></table>";
html += "</td><td id='tdPic2' valign='bottom'></td></tr></table></div> ";

this.tdInfo.InnerHtml = html; acc = null;
return true;
}
}
}

Answer 4

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="HotProductViewer.ascx.cs" Inherits="WholeMarket.FarmProduce.Info.Web.Util.HotProductViewer" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<table width="100%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td width="5%" align="center" class="product_title">
<IMG src="Images/Product.gif" width="18" height="18"></td>
<td valign="bottom" align="left" class="product_title">
特色产品图片展示
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="1" cellpadding="3" align="center" bgcolor="#bbbbbb">
<tr>
<td class="product_info">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td id="tdInfo" runat="server" align="center">

</td>
</tr>
<tr><td>
<script>
var speed=15
tdPic2.innerHTML=tdPic1.innerHTML
function Marquee()
{if(tdPic2.offsetWidth-divDemo.scrollLeft<=0)
divDemo.scrollLeft-=tdPic1.offsetWidth
else{divDemo.scrollLeft++}}
var MyMar=setInterval(Marquee,speed)
divDemo.onmouseover=function() {clearInterval(MyMar)}
divDemo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</td></tr>
</table>
</td>
</tr>
</table>

Answer 5

http://www.mikecat.net/blogview.asp?logID=1259&cateID=1里面有一个广告轮显得，一个仿msn相册的，自己去看吧，免费的，

Answer 6

to szc21(rerererere)：
小山的BLOG多少啊？

Answer 7

其实我开始用想用JS实现了PLAY，不过因为刚开始做WEB开发，对这些不熟！
我把我用JS的代码贴出来大家看下啊！
  <asp:ImageButton ID="ibNext" runat="server" ImageUrl="~/images/button_next.gif" OnClick="ibNext_Click" />
                                           
                                            <img id="img1" src="images/button_play.gif" onclick = "imgPlay()" />
                                            <img id="imgStop" src="images/button_stop.gif" onclick="stop()" />                                            <script language="javascript">
                                                  var timer;
                                                    function imgplay()
                                                    {
                                                     
                                                     timer = setInterval("document.getElementById('<%=ibNext.ClientID %>').click()", 3000);
                                                    }
                                                    function stop()
                                                    {
                                                      clearInterval(timer);
                                                    }
                                        </script>
通过代码，能够实现PLAY的第一步！但是当页面跳转以后PLAY就实现不了了！
上面代码的功能是这样的：
通过PLAY实现每3秒去点击下ibNext按钮，实现！
但是当页面跳转以后，PLAY按钮的状态就还原了，系统不知道用户是不是点击了PLAY按钮！
大家有没有好的建议阿？我问了些朋友，他们说这样的方法是实现不了的，除非用2个界面！
我的想法是能不能再加个状态标识，表示PLAY一直处于被点击状态！
请高手指教下！

Answer 8

剛初步寫了個，應該可以用的
<HTML>
<HEAD>
<script language="javascript">
<!--
var delay = 1000; //延時
var index = -1;  //當前播放的系數
var repetition = true; //是否循環播放

var timerID = null;

var imgCtrl = null; //IMG控件
var nameCtrl = null; //圖片名稱控件
var descCtrl = null; //圖片說明控件

var photos = new Array();
photos[0] = new Array("./Images/1.jpg","圖片1名稱", "圖片1說明");
photos[1] = new Array("./Images/2.jpg","圖片2名稱", "圖片2說明");
photos[2] = new Array("./Images/3.jpg","圖片3名稱", "圖片3說明");
photos[3] = new Array("./Images/4.jpg","圖片4名稱", "圖片4說明");
photos[4] = new Array("./Images/5.jpg","圖片5名稱", "圖片5說明");

function ShowPhoto()
{
imgCtrl.src = photos[index][0];
nameCtrl.innerHTML = photos[index][1];
descCtrl.innerHTML = photos[index][2];
}

function PalyPhotos()
{
index++;
if(index>=photos.length)
{
if(repetition) 
{
index=0;
ShowPhoto();
Play();
}
}
else
{
ShowPhoto();
Play();
}
}

function Play()
{
timerID = window.setTimeout(PalyPhotos,delay);
}

function Stop()
{
window.clearTimeout(timerID);
}

function First()
{
index = 0;
ShowPhoto();
}

function Previous()
{
if(index>0)
{
index--;
ShowPhoto();
}
}

function Next()
{
if(index<photos.length-1)
{
index++;
ShowPhoto();
}
}
function Last()
{
index = photos.length-1;
ShowPhoto();
}

window.onload = function()
{
imgCtrl = document.all("img1");
nameCtrl = document.all("text1");
descCtrl = document.all("dese1");
}
//-->
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<FONT face="新細明體">
<INPUT type="button" value="首張" onclick="First();">
<INPUT type="button" value="上一張" onclick="Previous();">
<INPUT type="button" value="播放" onclick="Play();">
<INPUT type="button" value="停止" onclick="Stop();">
<INPUT type="button" value="下一張" onclick="Next();">
<INPUT type="button" value="尾張" onclick="Last();">
<hr>
<img id="img1" width="200" height="300" />
<label id="dese1">圖片說明</label> 
<br>
<label id="text1">圖片名稱</label> 
</FONT>
</form>
</body>
</HTML>

Answer 9

<HTML>
<HEAD>
<script language="javascript">
<!--
var delay = 1000; //延時
var index = -1;  //當前播放的系數
var repetition = true; //是否循環播放var timerID = null;var imgCtrl = null; //IMG控件
var nameCtrl = null; //圖片名稱控件
var descCtrl = null; //圖片說明控件var photos = new Array();
photos[0] = new Array("./Images/1.jpg","圖片1名稱", "圖片1說明");
photos[1] = new Array("./Images/2.jpg","圖片2名稱", "圖片2說明");
photos[2] = new Array("./Images/3.jpg","圖片3名稱", "圖片3說明");
photos[3] = new Array("./Images/4.jpg","圖片4名稱", "圖片4說明");
photos[4] = new Array("./Images/5.jpg","圖片5名稱", "圖片5說明");function ShowPhoto()
{
imgCtrl.src = photos[index][0];
nameCtrl.innerHTML = photos[index][1];
descCtrl.innerHTML = photos[index][2];
}function PalyPhotos()
{
index++;
if(index>=photos.length)
{
if(repetition) 
{
index=0;
ShowPhoto();
Play();
}
}
else
{
ShowPhoto();
Play();
}
}function Play()
{
timerID = window.setTimeout(PalyPhotos,delay);
}function Stop()
{
window.clearTimeout(timerID);
}function First()
{
index = 0;
ShowPhoto();
}function Previous()
{
if(index>0)
{
index--;
ShowPhoto();
}
}function Next()
{
if(index<photos.length-1)
{
index++;
ShowPhoto();
}
}
function Last()
{
index = photos.length-1;
ShowPhoto();
}window.onload = function()
{
imgCtrl = document.all("img1");
nameCtrl = document.all("text1");
descCtrl = document.all("dese1");
}
//-->
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<FONT face="新細明體">
<INPUT type="button" value="首張" onclick="First();">
<INPUT type="button" value="上一張" onclick="Previous();">
<INPUT type="button" value="播放" onclick="Play();">
<INPUT type="button" value="停止" onclick="Stop();">
<INPUT type="button" value="下一張" onclick="Next();">
<INPUT type="button" value="尾張" onclick="Last();">
<hr>
<img id="img1" width="200" height="300" />
<label id="dese1">圖片說明</label> 
<br/>
<label id="text1">圖片名稱</label> 
</FONT>
</form>
</body>
</HTML>
==
这个可以