온라인에서 한 웹사이트의 소스코드 일부를 다운로드하여 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 언어="javascript " type="text/javascript " >
var imgWidth=248; //그림 너비
var imgHeight=200; //그림 높이
var textFromHeight=21; //초점 텍스트 상자 높이(단위: px)
var textStyle="whiter" ; //포커스 텍스트 클래스 스타일(연결 클래스 아님)
var textLinkStyle="whiter"; //포커스 단어 연결 클래스 스타일
varbuttonLineOn="#f60"; //버튼 밑줄 색상
varbuttonLineOff="#000"; //버튼 밑줄 색상
var TimeOut =5000; //각 그림의 전환 시간(단위: 밀리초)
var imgUrl=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)+';여백: 0px; 패딩:0px;높이:'+(imgHeight+textFromHeight)+'px; 오버플로:hidden;}')
; +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%>";
%> ";
imgUrl=imgUrls.split(",");
imgtext=
imgUrls.split(",");
imgAlt=imgUrls.split(",");
functionchangeimg(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++
;
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">');
//숫자 버튼 코드는
(var i=1;i<imgUrl. 길이 ;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 시작
else
{
var count=0
for (i=1;i<imgUrl.length;i++) {
if( (imgUrl[i]!=" ") && (imgLink[i]!="")&&(imgtext[i]!="")&&(imgAlt[i]!="") ) {
count++;
} else {
break;
}
}
함수 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(
)
}
document.images
;
imgInit.src=imgUrl[adNum];
document.images.imgInit.alt=
imgAlt[adNum];
document.getElementById('link'+adNum).style.ground=buttonLineOn;
;i++)
{
if (i!=adNum){document.getElementById('link'+i).style.Background=buttonLineOff;}
}
//focustext.innerHTML=imgtext[adNum];//아래에
theTimer
경로를 표시합니다.picture
=setTimeout("nextAd()", TimeOut)
}
document.write('<a target=_self href="javascript:goUrl()"><img style="FILTER: discoverTrans(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>
'
);
</script>
중요한 부분은 주석 처리되어 있으므로 aspx 코드에 직접 복사하면 됩니다.
참고: <body></body>에 <form></form> 태그를 사용하지 말고
<div align=left> </div>에 위의 js 코드를 직접 입력하세요. 왜 일부 양식에서는 항상 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 연결 = new SqlConnection("server=.;database=northwind;uid=sa;pwd=123"))
{
SqlDataAdapter sda = new SqlDataAdapter("imageid desc를 기준으로 이미지 순서에서 상위 5개 * 선택);
DataSet ds = new DataSet();
DataTable dt = new DataTable(
)
;
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 += dt.Rows[i] "imgAlt"].ToString() + ","
}
}
}
테스트 환경: vs2005
보기에 좋고 유용하다면 추천해주세요! 좋은 제안이나 해결책이 있으면 공유해 주세요. 감사합니다!
QQ:37210956