我把代码全贴出来,就是要实现数据表里的图片幻灯播放,select控件中绑定数据表里的PicName字段,我想在播放图片时把图片名称也显示出来(随图片变化图片名称在Select1控件中变化,比如img1控件中显示图片200905252300_L.jpg时,Select1控件中就显示200905252300_L,img1控件中显示图片200905252330_L.jpg时,Select1控件中就显示200905252330_L,依次类推)请大家帮我看一看哪里有问题,这个问题困扰好久了。
controlpic.js文件 Type.registerNamespace("Demo"); Demo.SlideShow=function()
{
this._slides=new Array();
this._delay=2000;
this._currentIndex=0;
this._pause=false;
} Demo.SlideShow.prototype=
{
get_Slides:function()
{
return this._slides;
},
set_Slides:function(value)
{
this._slides=value;
},
get_Delay:function()
{
return this._delay;
},
set_Delay:function(value)
{
this._delay=value;
},
get_CurrentIndex:function()
{
return this._currentIndex;
},
set_CurrentIndex:function(value)
{
if(value <0)
{
this._currentIndex=this._slides.length-1;
return;
}
if(value>=this._slides.length)
{
this._currentIndex=0;
}
else
{
this._currentIndex=value;
}
},
get_IsPaused:function()
{
return this._pause;
},
set_IsPaused:function(value)
{
this.pause=value;
},
Pause:function()
{
this._pause=true;
},
Play:function()
{
this._pause=false;
window.setTimeout("slideshow.ShowImage()",
this.get_Delay());
},
ShowFirst:function()
{
this._currentIndex=0;
this.ShowImage();
},
ShowLast:function()
{
this._currentIndex=this._slides.length-1;
this.ShowImage();
},
ShowNext:function()
{
var newIndex=this._currentIndex +1;
this.set_CurrentIndex(newIndex);
this.ShowImage();
},
ShowPrevious:function()
{
var newIndex=this._currentIndex -1;
this.set_CurrentIndex(newIndex);
this.ShowImage();
},
//显示图片
ShowImage:function()
{
var img=$get("Image1");
var Select=$get("Select1");
if(img.style.visibility=="hidden")
{
img.style.visibility="visible";
}
var slides=this.get_Slides();
var curIndex=this.get_CurrentIndex();
img.src=slides[curIndex];
$get("Select1").selectedIndex = curIndex;
if(this.get_IsPaused()==false)
{
this.set_CurrentIndex(curIndex+1);
this.Play();
}
setSelect(curIndex)
}
} function setSelect(curIndex)
{
var obj=document.getElementById("Select1")
obj.options[curIndex].selected=1
}
Demo.SlideShow.registerClass("Demo.SlideShow"); var slideshow=new Demo.SlideShow();
页面设计文件Default.aspx如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %> <!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 id="Head1" runat="server">
<title>Untitled Page </title>
<script type="text/javascript">
function pageLoad()
{
var img=$get("Image1");
var Select=$get("Select1");
img.style.visibility="hidden";
Select.style.visibility=="hidden"
PageMethods.GetSlides(OnSuccess,OnError,OnTimeOut);
}
function OnSuccess(result)
{
slideshow.set_Slides(result);
slideshow.set_Delay(2000);
slideshow.Play();
}
function OnError(result)
{
alert(result.get_message());
} function OnTimeOut(result)
{
alert(result);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True" AsyncPostBackTimeout="1000">
<Scripts>
<asp:ScriptReference Path="~/controlpic.js" />
</Scripts> </asp:ScriptManager>
</div>
<table style="width: 497px" border="1">
<tr>
<td style="width: 505px; height: 383px;">
<img width="500" id="Image1" height="375"/>
</td>
</tr>
<tr>
<td style="text-align: center; width: 505px;">
<select id="Select1" style="width: 114px">
<option selected="selected"> </option>
</select> </td>
</tr>
<tr>
<td style="width: 505px; height: 74px;">
<input id="Button1" type="button" value=" < <" onclick="slideshow.ShowFirst()" style="width:50px" />
<input id="Button2" type="button" value=" <" onclick="slideshow.ShowPrevious()" style="width:50px"/>
<input id="Button3" type="button" value="||" onclick="slideshow.Pause()" style="width:50px"/>
<input id="Button4" type="button" value="play" onclick="slideshow.Play()" style="width:50px"/>
<input id="Button5" type="button" value=">" onclick="slideshow.ShowNext()" style="width:50px"/>
<input id="Button6" type="button" value=">>" onclick="slideshow.ShowLast()" style="width:50px"/> </td>
</tr>
</table>
</form>
</body>
</html>
我的Default.aspx.cs文件是:
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Web.Services;
using System.Data.SqlClient; public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string[] GetSlides()
{
SqlConnection SqlCon = new SqlConnection(ConfigurationManager.AppSettings["ConSql"]);
SqlCon.Open();
string StrSql = "select PicPath,PicName from PicCloud";
SqlDataAdapter Sda = new SqlDataAdapter(StrSql, SqlCon);
DataSet Ds = new DataSet();
Sda.Fill(Ds);
string[] slides = new string[Ds.Tables[0].Rows.Count];
for (int i = 0; i < Ds.Tables[0].Rows.Count; i++)
{
slides[i] = Ds.Tables[0].Rows[i][0].ToString().Trim();
}
return slides;
}
}
数据表结构是:
PicId PicPath PicName
1 images/200905252300_L.jpg 200905252300_L
2 images/200905252330_L.jpg 200905252330_L
3 images/200905260030_L.jpg 200905260030_L
4 images/200905260100_L.jpg 200905260100_L
controlpic.js文件 Type.registerNamespace("Demo"); Demo.SlideShow=function()
{
this._slides=new Array();
this._delay=2000;
this._currentIndex=0;
this._pause=false;
} Demo.SlideShow.prototype=
{
get_Slides:function()
{
return this._slides;
},
set_Slides:function(value)
{
this._slides=value;
},
get_Delay:function()
{
return this._delay;
},
set_Delay:function(value)
{
this._delay=value;
},
get_CurrentIndex:function()
{
return this._currentIndex;
},
set_CurrentIndex:function(value)
{
if(value <0)
{
this._currentIndex=this._slides.length-1;
return;
}
if(value>=this._slides.length)
{
this._currentIndex=0;
}
else
{
this._currentIndex=value;
}
},
get_IsPaused:function()
{
return this._pause;
},
set_IsPaused:function(value)
{
this.pause=value;
},
Pause:function()
{
this._pause=true;
},
Play:function()
{
this._pause=false;
window.setTimeout("slideshow.ShowImage()",
this.get_Delay());
},
ShowFirst:function()
{
this._currentIndex=0;
this.ShowImage();
},
ShowLast:function()
{
this._currentIndex=this._slides.length-1;
this.ShowImage();
},
ShowNext:function()
{
var newIndex=this._currentIndex +1;
this.set_CurrentIndex(newIndex);
this.ShowImage();
},
ShowPrevious:function()
{
var newIndex=this._currentIndex -1;
this.set_CurrentIndex(newIndex);
this.ShowImage();
},
//显示图片
ShowImage:function()
{
var img=$get("Image1");
var Select=$get("Select1");
if(img.style.visibility=="hidden")
{
img.style.visibility="visible";
}
var slides=this.get_Slides();
var curIndex=this.get_CurrentIndex();
img.src=slides[curIndex];
$get("Select1").selectedIndex = curIndex;
if(this.get_IsPaused()==false)
{
this.set_CurrentIndex(curIndex+1);
this.Play();
}
setSelect(curIndex)
}
} function setSelect(curIndex)
{
var obj=document.getElementById("Select1")
obj.options[curIndex].selected=1
}
Demo.SlideShow.registerClass("Demo.SlideShow"); var slideshow=new Demo.SlideShow();
页面设计文件Default.aspx如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %> <!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 id="Head1" runat="server">
<title>Untitled Page </title>
<script type="text/javascript">
function pageLoad()
{
var img=$get("Image1");
var Select=$get("Select1");
img.style.visibility="hidden";
Select.style.visibility=="hidden"
PageMethods.GetSlides(OnSuccess,OnError,OnTimeOut);
}
function OnSuccess(result)
{
slideshow.set_Slides(result);
slideshow.set_Delay(2000);
slideshow.Play();
}
function OnError(result)
{
alert(result.get_message());
} function OnTimeOut(result)
{
alert(result);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True" AsyncPostBackTimeout="1000">
<Scripts>
<asp:ScriptReference Path="~/controlpic.js" />
</Scripts> </asp:ScriptManager>
</div>
<table style="width: 497px" border="1">
<tr>
<td style="width: 505px; height: 383px;">
<img width="500" id="Image1" height="375"/>
</td>
</tr>
<tr>
<td style="text-align: center; width: 505px;">
<select id="Select1" style="width: 114px">
<option selected="selected"> </option>
</select> </td>
</tr>
<tr>
<td style="width: 505px; height: 74px;">
<input id="Button1" type="button" value=" < <" onclick="slideshow.ShowFirst()" style="width:50px" />
<input id="Button2" type="button" value=" <" onclick="slideshow.ShowPrevious()" style="width:50px"/>
<input id="Button3" type="button" value="||" onclick="slideshow.Pause()" style="width:50px"/>
<input id="Button4" type="button" value="play" onclick="slideshow.Play()" style="width:50px"/>
<input id="Button5" type="button" value=">" onclick="slideshow.ShowNext()" style="width:50px"/>
<input id="Button6" type="button" value=">>" onclick="slideshow.ShowLast()" style="width:50px"/> </td>
</tr>
</table>
</form>
</body>
</html>
我的Default.aspx.cs文件是:
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Web.Services;
using System.Data.SqlClient; public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string[] GetSlides()
{
SqlConnection SqlCon = new SqlConnection(ConfigurationManager.AppSettings["ConSql"]);
SqlCon.Open();
string StrSql = "select PicPath,PicName from PicCloud";
SqlDataAdapter Sda = new SqlDataAdapter(StrSql, SqlCon);
DataSet Ds = new DataSet();
Sda.Fill(Ds);
string[] slides = new string[Ds.Tables[0].Rows.Count];
for (int i = 0; i < Ds.Tables[0].Rows.Count; i++)
{
slides[i] = Ds.Tables[0].Rows[i][0].ToString().Trim();
}
return slides;
}
}
数据表结构是:
PicId PicPath PicName
1 images/200905252300_L.jpg 200905252300_L
2 images/200905252330_L.jpg 200905252330_L
3 images/200905260030_L.jpg 200905260030_L
4 images/200905260100_L.jpg 200905260100_L
setSelect(curIndex) 这个不用了