對於有經驗的前端工程師來說，這樣的一個東西都已經爛了。沒有什麼好講的了，但是最近有時間開始學習前端的一些東西，既然用到了，就拿出來分享一下，感覺應該能幫到一些跟我一樣剛入門的前端小朋友。

用的是bootstrap框架。沒了解過的可以去了解一下他的柵格模式，非常的好用，為了方便大家拿到就能用，有一些CSS樣式都抽出來了，但是在實際專案中，還是單獨寫一個CSS檔案比較好一些，就跟下面的recommend-slide.css一樣，當然js也是同理的。

<div class="col-md-12" style="height:40%;padding:0px;margin-bottom: 20px;">
    <div class="bg-white" style="height:100%;margin: 10px 10px 10px 10px;">
        <link href="{HOME_THEME_PATH}slide/recommend-slide.css" type="text/css" rel="stylesheet">
        <div id="recommend-myslide" style="width: auto; height: 100%; overflow: hidden">
<table width="100%" height="100%" cellSpacing="0" cellPadding="0">
<tr>
<td class="pic" id="recommend-bimg">
{list action=module module=down order=title,url,thumb num=3}
<div class="{if $key==0}dis{else}undis{/if}" name="f">
<a href="{$t.url}" title="{$t.title}" {if $t.target}target="_blank"
{/if}><img alt="{$t.title}" style="width: 100%; height: 260px;"
          src="{dr_thumb($t.thumb, 1423, 200)}" border="0"></a>
</div>
{/list}
<table id="recommend-font_hd" width="100%" cellSpacing="0" cellPadding="0">
<tr>
<td class="title" id="recommend-info">
    {list action=module module=down order=title,url,thumb num=3}
    <div class="{if $key==0}dis{else}undis{/if}" name="f">
        <a href="{$t.url}" title="{$t.title}" {if
           $t.target}target="_blank" {/if}>{$t.title}</a>
    </div>
    {/list}
</td>
<td id="recommend-simg" nowrap="nowrap" style="text-align:left">
    {list action=navigator type=1}
    <div class="{if $key==0}{else}f1{/if}"
         onclick=play(x[{$key}],{$key}) name="f">{$key+1}
    </div>
    {/list}
</td>
</tr>
</table>
<script src="{HOME_THEME_PATH}slide/recommend-slide.js"></script>
</td>
</tr>
</table>
</div>

</div>
</div>
 

#recommend-myslide IMG {BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px}
#recommend-myslide {
	MARGIN:0px; OVERFLOW: hidden;
}
#recommend-myslide #recommend-bimg { OVERFLOW: hidden; }
#recommend-myslide #recommend-info {FONT-WEIGHT: bold; FONT-SIZE: 14px; LINE-HEIGHT: 34px; TEXT-ALIGN: center;}
#recommend-myslide .title A {COLOR: #fff; TEXT-DECORATION: none;}
#recommend-myslide .title A:hover {COLOR: #fff; TEXT-DECORATION: none}
#recommend-myslide #recommend-simg {PADDING-LEFT: 9px;width:100px;}
#recommend-myslide #recommend-simg DIV {FONT-SIZE: 14px; BACKGROUND:url(flsbtn.png) no-repeat; FLOAT: left; WIDTH: 12px; CURSOR: pointer;  HEIGHT: 12px; TEXT-ALIGN: center;font-family:"\5FAE\8F6F\96C5\9ED1"; font-weight:bold;margin-left:4px; text-indent: -9999px;}
#recommend-myslide #recommend-simg .f1 {BACKGROUND:url(flsbtn.png) no-repeat -16px 0px;font-family:"\5FAE\8F6F\96C5\9ED1";margin-left:4px;}
#recommend-myslide .dis {DISPLAY: block}
#recommend-myslide .undis {DISPLAY: none}

#recommend-myslide #recommend-font_hd {MARGIN-TOP:-35px; BACKGROUND:url(touming.png) ;width:100%; HEIGHT: 35px; position:relative}
#recommend-myslide #recommend-font_hd TD {OVERFLOW: hidden; HEIGHT: 25px}
#recommend-myslide .pic {OVERFLOW: hidden;}
#recommend-myslide .pic .dis A {DISPLAY: block; VERTICAL-ALIGN: middle; OVERFLOW: hidden; FONT-FAMILY: Arial;  TEXT-ALIGN: center}
#recommend-myslide .pic .dis A IMG {VERTICAL-ALIGN: middle}
#recommend-myslide #recommend-font_hd TD A {FONT-SIZE: 14px; LINE-HEIGHT: 25px; HEIGHT: 25px;}
 

function getid(o){ return (typeof o == "object")?o:document.getElementById(o);}
	function getNames(obj,name,tij)
	{
		var plist = getid(obj).getElementsByTagName(tij);
		var rlist = new Array();
		for(i=0;i<plist.length; ++i){if(plist[i].getAttribute("name") == name){rlist[rlist.length] = plist[i];}}
		return rlist;
	}

	function fiterplay(obj,num,t,name,c1,c2)
	{
		var fitlist = getNames(obj,name,t);
		for(i=0;i<fitlist.length;++i)
		{
			if(i == num)
			{
				fitlist[i].className = c1;
			}
			else
			{
				fitlist[i].className = c2;
			}
		}
	}
	function play(obj,num)
	{
		var s = getid('recommend-simg');
		var i = getid('recommend-info');
		var b = getid('recommend-bimg');
		try	
		{
			with(b)
			{
				filters[0].Apply();	
				fiterplay(b,num,"div","f","dis","undis");	
				fiterplay(s,num,"div","f","","f1");
				fiterplay(i,num,"div","f","dis","undis");
				filters[0].play();
			}
		}
		catch(e)
		{
				fiterplay(b,num,"div","f","dis","undis");
				fiterplay(s,num,"div","f","","f1");	
				fiterplay(i,num,"div","f","dis","undis");
		}
	}

	var autoStart = 0;
	var n = 0;		var s = getid("recommend-simg");
		var x = getNames(s,"f","div");
	function clearAuto() {clearInterval(autoStart);};
	function setAuto(){autoStart=setInterval("auto(n)", 3000)}
	function auto()	{


		n++  ;
		if(n>(x.length-1))
		{ n = 0;
		clearAuto();
		 }
		play(x[n],n);
		
	}
	function ppp(){
	setAuto();
	
	}
ppp();