순수한 CSS+DIV로 작성된 아름다운 플래시 슬라이드쇼와 SQL 태그 튜토리얼! _경험교류

순수한 CSS+DIV로 작성된 아름다운 플래시 슬라이드쇼와 SQL 태그 튜토리얼!

아래 코드는 좀 과하네요! 하지만 만들어보면 분명 마음에 들 거예요!

순수한 CSS+DIV로 작성된 아름다운 플래시 슬라이드쇼와 SQL 태그 튜토리얼! 헛소리는 하고 싶지 않으니 바로 본론으로 들어가겠습니다.

먼저 데모 보기: http://www.gz7y.com 멋진 추천 항목을 클릭하여 확인하세요!

아래 코드가 이해가 안가시거나 하기 어려우시면 내일 제 영상을 기다려주세요.

CSS는 다음과 같습니다:
#f_buttonDiv .bg{width :17px ; 높이:17px; 배경:#fff; float:right; 필터:Alpha(불투명도=40);}
#f_buttonDiv a{width:17px;height:11px !important;height:17px;float:right ;padding -top:5px;color:#fff;font-family:Arial, Helvetica, sans-serif;font-size:10px; text-align:center;display:block;overflow:hidden; 텍스트- 장식:없음;위치:절대;}

#f_buttonDiv a:link,#f_buttonDiv a:visited,#f_buttonDiv a:active{color:#000;}

#f_buttonDiv a:hover{배경:# FF840C; 색상:#fff;}
#f_buttonDiv a.on:link,#f_buttonDiv a.on:visited,#f_buttonDiv a.on:active,#f_buttonDiv a.on:hover{배경:#FF840C;색상: #fff ;}

#f_buttonDiv a.on:hover{배경:#FF6600;}
-->

SQL 루프 본문은 다음과 같습니다.

<script> <BR>var imgWidth=250; <BR>var imgHeight=205; <BR>var _timeOut_=5000; <BR>var show_text = true; //是否显示焦点文字 <BR>var timeOut=_timeOut_; <BR>var timeOut2=_timeOut_/2;//onmouseout img后需要切换的时间 <BR>var now=0; //第一张图 <BR>var target="_blank"; //打开方式 <BR>var button_on ='on'; //当前焦点对应按钮的样式名 <BR>var button_off ='';//非当前焦点对应按钮的样式名 <BR>//不可修改区域 <BR>var imgUrl = new Array(); <BR>var imgText = new Array(); <BR>var imgLink = new Array(); <BR>var imgAlt= new Array(); <BR>//var menuList = new Array();//菜单menu <BR>var ver=2; //兼容浏览器版本 默认2 为非ie <BR>var firstTime=true; <BR>var n =-1; <BR>[loop=5] <BR>imgUrl[++n]='{$Field(Picurl,Text,0,...,0,)}'; <BR>imgText[n]='<a href="{$Field(ID,GetInfoUrl,1,1)}" target="_blank" class=linkblack>{$Field(Title,Text,0,...,0,)}'; <BR>imgLink[n]='{$Field(ID,GetInfoUrl,1,1)}'; <BR>imgAlt[n]='{$Field(Title,Text,0,...,0,)}'; <BR>[/loop] <BR>var count=0; <BR>for (i=0;i<img Url.length;i++) { <BR alt="순수한 CSS+DIV로 작성된 아름다운 플래시 슬라이드쇼와 SQL 태그 튜토리얼! _경험교류" >if( (imgUrl[i]!="") && (imgText[i]!="")&& (imgLink[i]!="")&& (imgAlt[i]!="")) { <BR>count++; <BR>} else { <BR>break; <BR>} <BR>} <BR>function p$(string){ <BR>document.write(string); <BR>} <BR>function $(id){ <BR>return document.getElementById(id); <BR>} <BR>//固定图片size <BR>p$("<style> #f_img { width:"+imgWidth+"px;height:"+imgHeight+"px;"); <BR>function change(){ <BR>if (ver==1){ <BR>with($('f_img').filters[0]){ <BR>Transition=1; <BR>apply(); <BR>play(); <BR>} <BR>} <BR>if (firstTime){ firstTime=false;timeOut=_timeOut_/1000;} <BR>else{ <BR>$('f_img').src=imgUrl[now]; <BR>$('f_img').alt=imgAlt[now]; <BR>$('f_imgLink').href=imgLink[now]; <BR>for (var i=0;i<count;i++) { <BR>$('b'+i).className="button"; <BR>//$('f_menu'+i).className=""; <BR>} <BR>$('b'+now).className="on"; <BR>//$('f_menu'+now).className="on"; <BR>now=(now>=imgUrl.length-1)?0:now+1; <BR>timeOut=_timeOut_; <BR>} <BR>theTimer=setTimeout("change()", timeOut); <BR>} <BR>function b_change(num){ <BR>window.clearInterval(theTimer); <BR>now=num; <BR>firstTime=false; <BR>change(); <BR>} <BR>//draw 渐变line （即css:f_line) <BR>function draw_line(){ <BR>var div = document.createElement("div"); <BR>div.id = 'f_line'; <BR>$('f_infoDiv').insertBefore(div,$('f_infoDiv').childNodes.item(0)); <BR>} <BR>//表现层 start <BR>//图片 <BR>var a = document.createElement("a"); <BR>a.id="f_imgLink"; <BR>a.target=target; <BR>a.href=imgLink[now]; <BR>$('f_imgDiv').appendChild(a); <BR>var img = document.createElement("img"); <BR>img.id="f_img"; <BR>img.width=imgWidth; <BR>img.height=imgHeight; <BR>img.src=imgUrl[now]; <BR>img.alt=imgAlt[now]; <BR>a.appendChild(img); <BR>//数字按钮 <BR>for (var i=count-1;i>=0;i--){ <BR>var div_bg = document.createElement("div"); <BR>div_bg.id = 'div_bg'+i; <BR>div_bg.className='bg'; <BR>$('f_buttonDiv').appendChild(div_bg); <BR>var a = document.createElement("a"); <BR>a.id = 'b'+i; <BR>a.className = (i==now+1)?"button_on":"button_off"; <BR>a.title=imgAlt[i]; <BR>a.innerHTML=i+1; <BR>a.href='javascript:b_change('+i+')'; <BR>$('div_bg'+i).appendChild(a); <BR>var div= document.createElement("div"); <BR>$('f_buttonDiv').appendChild(div); <BR>} <BR>//表现层 end <BR>$('f_img').onmouseover=function(){window.clearInterval(theTimer);} <BR>$('f_img').onmouseout=function(){theTimer=setTimeout("change()", timeOut2);} <BR>try{ //滤镜版本 <BR>new ActiveXObject("DXImageTransform.Microsoft.Fade"); <BR>$('f_img').filters[0].play(); <BR>ver=1; <BR>draw_line(); <BR>} <BR>catch (e){ver=2;} <BR>var theTimer = setTimeout("change()", _timeOut_/1000); <BR></script> SQL 쿼리를 잊지 마세요: ------------ --- ---------------------------------- --- --------------- Adddate desc를 기준으로 verific=1 및 Slide=1인 KS_Article에서 상위 5개 ID, 제목, 추가 날짜, Picurl, 슬라이드, 확인을 선택 - --- ---------------------------------- --- ------------- 아직 어떻게 해야할지 모르시거나 할 수 없거나 이해할 수 없습니다. 코드를 알려주시면 동영상을 보내드리겠습니다.