【前端】完整，简单的幻灯片的实现

对于有经验的前端工程师来说，这样的一个东西都已经烂了。没有什么好讲的了，但是最近有时间开始学习前端的一些东西，既然用到了，就拿出来分享一下，感觉应该能帮到一些跟我一样刚入门的前端小朋友。

用的是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-slide.css

#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;}

recommend-slide.js

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();