Web サイトのソース コードの一部をオンラインでダウンロードすると、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" ; // フォーカス テキスト クラス スタイル (接続クラスではありません)
var textLinkStyle="whiter" // フォーカス ワード接続クラス スタイル
var buttonLineOn="#f60" // ボタンの下線の色
var buttonLineOff="#000"; //ボタンの下線の色
var TimeOut =5000; //各ピクチャの切り替え時間（単位：ミリ秒）
var imgLink=
new
Array();
var imgAlt=new Array();
var adNum= 0;
// フォーカス テキスト ボックスの高さのスタイル シートが開始されます
document.write
('<style type="text/css">');
'+(imgWidth+2)+';マージン:0px;高さ:'+(imgHeight+textFromHeight)+'px;
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>')
;
//フォーカスの終了テキストボックスの高さのスタイルシート
imgUrls="<%=imgUrl%>";//背景のCSコードの属性を取得します
imgtexts="<
%=imgtext%>";
imgAlts="<%=imgAlt %> ";
imgUrl=imgUrls.split(",");
imgtext=imgUrls.split(",
"
);
関数changeimg(n)
{
adNum=
adNum-
1;}
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=1
; ;
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>');
div> ');
nextAd();
}
//NetScape が終了します
//IE が開始します
{
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++
;
if( key==0 ){
key=1;
}
else if (document.all){
imgInit.filters.revealTrans.apply
(
)
;
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 を
以下に表示しますpic
=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>')
; " 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>')
;
</script>
重要な箇所はコメント化されているので、aspx コードに直接コピーするだけです。
注: <body></body> で <form></form> タグを使用せず、
上記の JS コードを <div align=left> </div> に直接入力してください。一部のフォームが常に imgInit エラーを報告する理由がわかりません。
4. cs でデータベース呼び出しを行う: 直接コード、ははは、理解できません
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
binding()
}
}
public string imgUrl = " " , imgLink = "", imgtext = "", imgAlt = "";
void binding()
{
using (SqlConnection connection = new SqlConnection("server=.;database=northwind;uid=sa;pwd=123"))
{
SqlDataAdapter sda = new SqlDataAdapter("画像 ID の説明から上位 5 つを選択", connection);
DataSet ds = new DataSet()
dt = new DataTable(
ds)
; 0];
for (int i = 0; i < dt.Rows.Count; i++)
{
imgUrl += dt.Rows[i]["imgUrl"].ToString() + ","
; [i]["imgText"].ToString() + ",";
imgLink +=
dt.Rows[i]["imgLink"].ToString() + ",";
"imgAlt"].ToString() + ","
}
}
}
テスト環境: vs2005。
良さそうで役に立った場合は、高評価をお願いします。何か良い提案や解決策がありましたら、ぜひ共有してください。ありがとうございます。
電子メール:[email protected]
QQ:37210956