我在网上下载了一个网站的部分源代码 ，看到里面有实现CSDN首页图片的切换效果。虽然以前看网上有许多转载的，但是里面的代码都是在js中定义一个数组来存放图片的信息，但是今天这个方法更加灵活啊！只需要以下几步即可。
1.创建sql数据库：
CREATE TABLE [dbo].[images] (
[imageid] [int] IDENTITY (1, 1) NOT NULL ,
[imgUrl] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[imgText] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
[imgLink] [nvarchar] (100) COLLATE Chinese_PRC_CI_AS NULL ,
[imgAlt] [nvarchar] (50) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY]
2.引用外部css代码
<link href="styles/StyleSheet2.css" rel="stylesheet" type="text/css" />
3.写js代码：（不知道为什么放在一个单独的js文件不行）
<script language="javascript" type="text/javascript" >
var imgWidth=248; //图片宽
var imgHeight=200; //图片高
var textFromHeight=21; //焦点字框高度 (单位为px)
var textStyle="whiter"; //焦点字class style (不是连接class)
var textLinkStyle="whiter"; //焦点字连接class style
var buttonLineOn="#f60"; //button下划线on的颜色
var buttonLineOff="#000"; //button下划线off的颜色
var TimeOut=5000; //每张图切换时间 (单位毫秒);
var imgUrl=new Array();
var imgLink=new Array();
var imgtext=new Array();
var imgAlt=new Array();
var adNum=0;
//焦点字框高度样式表 开始
document.write(<style type="text/css">);
document.write(#focuseFrom{width:+(imgWidth+2)+;margin: 0px; padding:0px;height:+(imgHeight+textFromHeight)+px; overflow:hidden;});
document.write(#txtFrom{height:+textFromHeight+px;line-height:+textFromHeight+px;width:+imgWidth+px;overflow:hidden;});
document.write(#imgTitle{width:+imgWidth+;top:-+(textFromHeight+14)+px;height:18px});
document.write(</style>);
document.write(<div id="focuseFrom">);
//焦点字框高度样式表 结束
imgUrls="<%=imgUrl%>";//获取后台cs代码的属性
imgtexts="<%=imgtext%>";
imgLinks="<%=imgLink%>";
imgAlts="<%=imgAlt%>";
imgUrl=imgUrls.split(",");
imgtext=imgUrls.split(",");
imgLink=imgUrls.split(",");
imgAlt=imgUrls.split(",");
function changeimg(n)
{
adNum=n;
window.clearInterval(theTimer);
adNum=adNum-1;
nextAd();
}
function goUrl(){
window.open(imgLink[adNum],_blank);
}
//NetScape开始
if (navigator.appName == "Netscape")
{
document.write(<style type="text/css">);
document.write(.buttonDiv{height:4px;width:21px;});
document.write(</style>);
function nextAd(){
if(adNum<(imgUrl.length-1))adNum++;
else adNum=1;
theTimer=setTimeout("nextAd()", TimeOut);
document.images.imgInit.src=imgUrl[adNum];
document.images.imgInit.alt=imgAlt[adNum];
//document.getElementById(focustext).innerHTML=imgtext[adNum];//在图片下面显示图片的路径
document.getElementById(imgLink).href=imgLink[adNum];
}
document.write(<a id="imgLink" href="+imgLink[1]+" target=_blank class="p1"><img src="http://www.knowsky.com/+imgUrl[1]+" name="imgInit" width=+imgWidth+ height=+imgHeight+ border=1 alt="+imgAlt[1]+" class="imgClass"></a><div id="txtFrom"><span id="focustext" class="+textStyle+">+imgtext[1]+</span></div>);
document.write(<div id="imgTitle">);
document.write(<div id="imgTitle_down">);
//数字按钮代码开始
for(var i=1;i<imgUrl.length;i++){document.write(<a href="javascript:changeimg(+i+)" class="button" style="cursor:hand" title="+imgAlt[i]+">+i+</a>);}
//数字按钮代码结束
document.write(</div>);
document.write(</div>);
document.write(</div>);
nextAd();
}
//NetScape结束
//IE开始
else
{
var count=0;
for (i=1;i<imgUrl.length;i++) {
if( (imgUrl[i]!="") && (imgLink[i]!="")&&(imgtext[i]!="")&&(imgAlt[i]!="") ) {
count++;
} else {
break;
}
}
function playTran(){
if (document.all)
imgInit.filters.revealTrans.play();
}
var key=0;
function nextAd(){
if(adNum<count)adNum++ ;
else adNum=1;
if( key==0 ){
key=1;
} else if (document.all){
imgInit.filters.revealTrans.Transition=23;
imgInit.filters.revealTrans.apply();
playTran();
}
document.images.imgInit.src=imgUrl[adNum];
document.images.imgInit.alt=imgAlt[adNum];
document.getElementById(link+adNum).style.background=buttonLineOn;
for (var i=1;i<=count;i++)
{
if (i!=adNum){document.getElementById(link+i).style.background=buttonLineOff;}
}
//focustext.innerHTML=imgtext[adNum];//在图片下面显示路径
theTimer=setTimeout("nextAd()", TimeOut);
}
document.write(<a target=_self href="javascript:goUrl()"><img style="FILTER: revealTrans(duration=1,transition=5);" src="http://www.knowsky.com/javascript:nextAd()" width=+imgWidth+ height=+imgHeight+ border=0 vspace="0" name=imgInit class="imgClass"></a><br>);
document.write(<div id="txtFrom"><span id="focustext" class="+textStyle+"></span></div>);
document.write(<div id="imgTitle">);
document.write( <div id="imgTitle_down"> <a class="trans"></a>);
//数字按钮代码开始
for(var i=1;i<imgUrl.length;i++)
{
document.write(<a id="link+i+" href="javascript:changeimg(+i+)" class="button" style="cursor:hand; " title="+imgAlt[i]+" onFocus="this.blur()">+i+</a>);
}
//数字按钮代码结束
document.write(</div>);
document.write(</div>);
document.write(</div>);
document.write(</div>);
}
//IE结束
</script>
里面重要的地方都有注释了，直接复制到你的aspx代码中即可。
注意：在<body></body>中不要<form></form>标签，直接在<div align=left>
</div>中输入上面的js代码即可。不知道为什么有form总是报imgInit错误。
4.在cs进行数据库调用：直接代码了，呵呵呵不会看不懂吧
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
bind();
}
}
public string imgUrl = "", imgLink = "", imgtext = "", imgAlt = "";
void bind()
{
using (SqlConnection connection = new SqlConnection("server=.;database=northwind;uid=sa;pwd=123"))
{
SqlDataAdapter sda = new SqlDataAdapter("select top 5 * from images order by imageid desc", connection);
DataSet ds = new DataSet();
DataTable dt = new DataTable();
sda.Fill(ds);
dt = ds.Tables[0];
for (int i = 0; i < dt.Rows.Count; i++)
{
imgUrl += dt.Rows[i]["imgUrl"].ToString() + ",";
imgtext += dt.Rows[i]["imgText"].ToString() + ",";
imgLink += dt.Rows[i]["imgLink"].ToString() + ",";
imgAlt += dt.Rows[i]["imgAlt"].ToString() + ",";
}
}
}
测试环境：vs2005
如果看着不错对你有用麻烦顶一下啊！如果有好的建议或者好的解决方案也麻烦你共享一下，谢谢！
E-mail:teng_s2000@126.com
QQ:37210956
文章整理：西部数码--专业提供域名注册、虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!
