工资不涨,物价在疯狂的涨!

博客园 首页 新随笔 联系 订阅 管理

说明:请注意标有删除线的地方需要删除,粗斜体部分为需要修改或者添加代码

下载地址

我在网上下载了一个网站的部分源代码 ,看到里面有实现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="'+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=imgUrl.length-1;

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="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>

<script>document.getElementByName('imgInit').src=nextAd();</script>

 

里面重要的地方都有注释了,直接复制到你的aspx代码中即可。

注意:在<body></body>中不要<form></form>标签,直接在<div align=left>

</div>中输入上面的js代码即可。不知道为什么有form总是报imgInit错误。

4.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.Data.SqlClient;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if ( !IsPostBack )
        {
            bind ( );
        }
    }
    public string imgUrl=string.Empty;
    public string imgtext = string.Empty;
    public string imgLink = string.Empty;
    public string imgAlt = string.Empty;
    void bind( )
    {

        using ( SqlConnection connection = new SqlConnection ( @"server=.\sqlexpress;database=images;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 ( ) + ",";

            }

        }
    }
 


}

上次有位朋友向我要CSS代码,但是当时手边没有这个代码,所以今天有时间将CSS代码也贴上,供大家使用!

#imgTitle {
 FILTER: ALPHA(opacity=70); LEFT: 0px; OVERFLOW: hidden; POSITION: relative; TEXT-ALIGN: right
}
#imgTitle_up {
 LEFT: 0px; HEIGHT: 1px; TEXT-ALIGN: left
}
#imgTitle_down {
 LEFT: 0px; TEXT-ALIGN: left
}
.imgClass {
 BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid; BORDER-BOTTOM: #fff 1px solid
}
#txtFrom {
 VERTICAL-ALIGN: middle; PADDING-TOP: 2px; TEXT-ALIGN: center
}
.button {
 PADDING-RIGHT: 7px; PADDING-LEFT: 7px; BACKGROUND: #7b7b63; PADDING-BOTTOM: 2px; MARGIN: 0px; FONT: bold 9px sans-serif; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 2px; TEXT-DECORATION: none
}
A.button {
 COLOR: #ffffff; FONT-FAMILY: sans-serif; BACKGROUND-COLOR: #000000; TEXT-DECORATION: none
}
A.button:link {
 COLOR: #ffffff; FONT-FAMILY: sans-serif; BACKGROUND-COLOR: #000000; TEXT-DECORATION: none
}
A.button:visited {
 COLOR: #ffffff; FONT-FAMILY: sans-serif; BACKGROUND-COLOR: #000000; TEXT-DECORATION: none
}
A.button:hover {
 BACKGROUND: #fff; COLOR: #fff; FONT-FAMILY: sans-serif; TEXT-DECORATION: none
}
.buttonDiv {
 BACKGROUND: #000000; FLOAT: left; VERTICAL-ALIGN: middle; WIDTH: 21px; HEIGHT: 1px; TEXT-ALIGN: center
}
.trans {
 FILTER: progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=0,finishOpacity=40); WIDTH: 90px; BACKGROUND-COLOR: #000
}

测试环境:vs2008SP1+Win7+IE8+SQL Seerver2008

posted on 2008-01-31 10:21  腾云驾雾  阅读(1786)  评论(1编辑  收藏  举报