看演示再说：http://www.rayli.com.cn/   也许你知道怎么做了，但新手还不知道。

该焦点轮换我建立是四个SQL标签。

只要你照着复制粘贴就行了。如果要学习，可以详细的看啊。。。

进后台--->标签--->自定义SQL标签：

第一：幻灯第一张图片，也就是打开你最先看见的这张图。

        SQL:select top 1 Adddate,Picurl,Slide from KS_Article where Slide=1 AND Picurl<>""  order by Adddate desc

       循环体：[loop=1]<img style="cursor:hand;FILTER: BlendTrans(Duration=1);" src="{$Field(Picurl,Text,0,...,0,)}" width="294" height="398" name="imgInit" align="absmiddle" onclick="jdturl()">[/loop]

第二：幻灯小图片，大图下的那些小图片。

        SQL:select top 7 Adddate,Picurl,Slide from KS_Article where Slide=1 AND Picurl<>""  order by Adddate desc

        循环体：[loop=7]
<td id="gdxt{$AutoID}" onclick="nextAdonclick({$AutoID})" class="gdxtNameOf" height="53"><img src="{$Field(Picurl,Text,0,...,0,)}" style="cursor:pointer;" width="36" height="49" border="0" onmouseover="stopnextad({$AutoID})" onmouseout="startnextad()"></td>
[/loop]

第三：幻灯第一张图片标题。

        SQL:select top 1 title,Adddate,Slide from KS_Article where slide=1 order by adddate desc

         循环体：[loop=1]{$Field(title,Text,32,,0,)}[/loop]

第四：最重要的一步！整体循化imgUrl（幻灯图片地址），imgLink（连接地址），imgtext（标题）

        SQL:select top 7 ID,title,Adddate,Picurl,Slide from KS_Article where Slide=1 and Picurl<>"" order by adddate desc

       循环体：

<script type=text/javascript>
        
             var isIE = navigator.appVersion.indexOf("MSIE") != -1 ? true:false;
             var TimeOutaa=5000;              //每张图切换时间 (单位毫秒);

             var imgUrl=new Array();
             var imgLink=new Array();
             var imgtext=new Array();
             var adNum=0;
             var theTimer;
             var whichlink;
[loop=7]
imgUrl[{$AutoID}]='{$Field(Picurl,Text,0,...,0,)}';
             imgLink[{$AutoID}]="{$Field(ID,GetInfoUrl,1,1)}";
             imgtext[{$AutoID}]='<a href="{$Field(ID,GetInfoUrl,1,1)}" class="jdtwenzi01" target="_blank">{$Field(title,Text,32,,0,)}</a>';
[/loop]
var count=0;
            function jdturl(){
              window.open(imgLink[whichlink]);
            }
            
            function chagncssname(nnn){//小图当前图片的样式
             for (i=1;i<8;i++){
              document.getElementById("gdxt"+i).className="gdxtNameOf";
             }              
             document.getElementById("gdxt"+nnn).className="gdxtNameOn";
                          
            }             
            function playTran(){
             if (isIE){
               imgInit.filters.BlendTrans.play();
              }
            }
            var key=0;
            
            //页面打开时的焦点图的程序开始
            
            function nextAd(){//页面打开时大图的切换
              if(adNum<(imgUrl.length-1)){
               adNum++;
              }else{
               adNum=1;
              }
              if(document.all){
               //imgInit.filters.BlendTrans.Transition=23;
               imgInit.filters.BlendTrans.apply();
               playTran();
              }
              whichlink=adNum;
              chagncssname(adNum)
              document.images.imgInit.src=imgUrl[adNum];
              document.getElementById("jdttext").innerHTML=imgtext[adNum];
              theTimer=setTimeout("nextAd()", TimeOutaa);
            }
            
           nextAd();
           function stopnextad(nnn){//停在滚动层时滚动层停止滚动程序
            document.getElementById("gdxt"+nnn).className="gdxtNameOn";
            clearTimeout(theTimer);
           }
           
           function startnextad(){//移出滚动层时滚动层开始滚动程序
            chagncssname(adNum);
            theTimer=setTimeout("nextAd()", TimeOutaa);
           }
           
           function nextAdonclick(nn){//点击小图的切换
              
              adNum=nn;
              if(document.all){
               //imgInit.filters.BlendTrans.Transition=23;
               imgInit.filters.BlendTrans.apply();
               playTran();
              }
              whichlink=adNum;
              chagncssname(adNum);
              document.images.imgInit.src=imgUrl[adNum];
              document.getElementById("jdttext").innerHTML=imgtext[adNum];
              
              
              
            }
            
            
           //页面打开时的焦点图的程序结束
          
        </script>

灰色背景部分是我自己整理上去的。原版不是这个的循环。。。。

加入模板代码：

----------------------------------------------------------------------------------

<div style="width:294px;clear:both;">      
         <table width="294" border="0" cellpadding="0" cellspacing="0">
     <tr valign="top"><td width="294" height="398">
        <div style="position:relative;width:294px;text-align:left">
                    <div style="position:absolute;top:0px;left:0px">{SQL_幻灯第一张图片()}</div>
                    <div id="focustextBg"></div>
                    <div id="jdttext" style="padding-top:9px;z-index:100;position:absolute;top:361px;left:0px;width:294px;height:28px;font-family:'黑体';" class="lh20 textaligncenter jdtwenzi01"><a href="#" class="jdtwenzi01" target="_blank">{SQL_幻灯第一张图片标题()}</a></div>
                </div></td></tr>
          <tr bgcolor="#1C1C1C"><td width="294" height="55" align="center">
                <table border="0" align="center" cellpadding="0" cellspacing="0">
        <tr align=center>
        {SQL_幻灯小图片()}        </tr>
    </table></td></tr>
    </table>
             {SQL_整体循化()}        </div>

-------------------------------------------------------------------

结束了，但是不要忘记CSS代码，放在<head>与</head>之间。想要这个样式的回个帖。。。。。。。

以下内容只有回复后才可以浏览,请先登录！

是不经典？

回一个看看