I downloaded part of the source code of a website online and saw that it implemented the switching effect of the CSDN homepage image. Although there were many reprints on the Internet in the past, the code inside defined an array in js to store the image information, but today this method is more flexible! All it takes is the following steps.
1. Create a sql database:
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. Reference external css code
<link href="styles/ StyleSheet2.css" rel="stylesheet" type="text/css" />
3. Write js code: (I don’t know why putting it in a separate js file doesn’t work)
<script language="javascript" type="text/javascript " >
var imgWidth=248; //Picture width
var imgHeight=200; //Picture height
var textFromHeight=21; //Height of focus text box (unit: px)
var textStyle="whiter"; //Focus text class style ( Not a connection class)
var textLinkStyle="whiter"; //Focus word connection class style
var buttonLineOn="#f60"; //Color of button underline on
var buttonLineOff="#000"; //Color of button underline off
var TimeOut =5000; //The switching time of each picture (unit: milliseconds);
var imgUrl=new Array();
var imgLink=
new Array();var imgtext=new Array();
var imgAlt=new Array();
var adNum= 0;
//Focus text box height style sheet starts
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">');
//End of focus text box height style sheet
imgUrls="<%=imgUrl%>";//Get the attributes of the background cs code
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 starts
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];//under the image Display the path of the image
document.getElementById('imgLink').href=imgLink[adNum];
}
document.write('<a id="imgLink" href="'+imgLink[1]+'" target=_blank class="p1"><img src="'+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">');
//The number button code begins
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>');}
//End of number button code
document.write('</div>');
document.write('</div>');
document.write('</div> ');
nextAd();
}
//NetScape ends
//IE starts
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];//Display the paththeTimer
under the picture
=setTimeout("nextAd()", TimeOut);
}
document.write('<a target=_self href="javascript:goUrl()"><img style="FILTER: revealTrans(duration=1,transition=5) ;" src="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>');
//Number button code starts
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>');
}
//End of number button code
document.write('</div>');
document.write('</div>');
document.write('</div>');
document.write('</div>');
}
//IE ends
</script>
The important places in it are commented, just copy it directly into your aspx code.
Note: Do not use the <form></form> tag in <body></body>,
just enter the above js code directly in <div align=left> </div>. I don’t know why some forms always report imgInit errors.
4. Make database calls in cs: Direct code, hahaha, you can’t understand it
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() + ",";
}
}
}
Test environment: vs2005.
If it looks good and is useful to you, please give it a thumbs up! If you have any good suggestions or solutions, please share them, thank you!
E-mail:[email protected]
QQ:37210956