Beautiful Flash slideshow and SQL tag tutorial written with pure CSS DIV! _Experience exchange

Beautiful Flash slideshow and SQL tag tutorial written with pure CSS DIV!

The code below is a bit too much! But you’ll definitely like it when you make it!

Beautiful Flash slideshow and SQL tag tutorial written with pure CSS DIV! I don't want to talk nonsense, let's get straight to the point.

Watch the demo first: http://www.gz7y.com Click on the wonderful recommendations to see them!

If you don’t understand the code below or can’t do it, wait for my video tomorrow.

The CSS is as follows:


The SQL loop body is as follows:

<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="Beautiful Flash slideshow and SQL tag tutorial written with pure CSS DIV! _Experience exchange" >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>



Don’t forget the SQL query statement:

--------------------------------- --------------------------------------------------
select top 5 ID,Title,Adddate,Picurl,Slide,Verific from KS_Article where verific=1 and Slide=1 order by Adddate desc ------------------ -------------------------------------------------- -----------


If you don't know how to do it yet or can't make it or can't understand the code, please let me know and I will send the video.