美しい Flash スライドショーと純粋な CSS DIV で書かれた SQL タグのチュートリアル! _体験交流

美しい Flash スライドショーと純粋な CSS DIV で書かれた SQL タグのチュートリアル!

以下のコードは少しやりすぎです。でも作ってみたら絶対気に入るはず！

美しい Flash スライドショーと純粋な CSS DIV で書かれた SQL タグ チュートリアル!くだらない話はしたくないので、本題に入りましょう。

まずデモをご覧ください: http://www.gz7y.com 素晴らしいおすすめをクリックしてご覧ください。

以下のコードがわからない場合、または実行できない場合は、明日の私のビデオをお待ちください。

CSS は次のとおりです:


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="美しい Flash スライドショーと純粋な 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 クエリ ステートメントを忘れないでください。

---------------------- ---------- -------------------------------------- ----------
KS_Article から上位 5 つの ID、Title、Adddate、Picurl、Slide、Verific を選択します (verific=1 および Slide=1 の場合)。Adddate desc で並べ替えます --------- ---------------------------------------------------- --------- -----------


まだやり方がわからない、作れない、できないならコードが理解できましたら、教えてください。ビデオを送ります。