制作循環幻燈片放映效果如何用于顯示商品??_動易Cms教程
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      

      制作循環幻燈片放映效果（動易 DIV JS）：
      


      


      模板代碼：
      


      


      




      

{$Skin_CSS}
      {$MenuJS}
      </head>
      <body> 


      


      <DIV id="main_left">
      <script language="JavaScript" type="text/javascript"> 
      var tID=0;
      var nn;
      nn=0;
      setTimeout('change_img()',4000);
      function change_img()
      {
      if(nn>4) nn=0
      setTimeout('ShowTabs(' nn ')',4000);
      nn  ;
      tt=setTimeout('change_img()',4000);
      }
      


      function ShowTabs(ID){
      var Tabss=document.getElementsByName("Tabs");
      Tabs[tID].style.display='none';
      Tabs[ID].style.display='block';
      menus.className='num bg' ID;
      tID=ID;
      }
      </script>
      【ProductList(0,true,0,4,0,false,false,0,1,True,20,0)】
      <DIV class=focusPic id=Tabs style="DISPLAY:none">
      <DIV><A href="{$ProductUrl}">{$ProductThumb(224,130)}</A></DIV>
      <DIV id="box_tit"><A href="{$ProductUrl}">{$ProductName}</A></DIV>
      </DIV>
      【/ProductList】
      <DIV class=focusPic>
      <DIV class=textNum>
      <DIV class="num bg0" id="menus">
      <UL>
      <div ID="put_li"><A href="nojavascript...ShowTabs(0);" target=_self>1</A></div>
      <div ID="put_li"><A href="nojavascript...ShowTabs(1);" target=_self>2</A></div>
      <div ID="put_li"><A href="nojavascript...ShowTabs(2);" target=_self>3</A></div>
      <div ID="put_li"><A href="nojavascript...ShowTabs(3);" target=_self>4</A></div>
      <div ID="put_li"><A href="nojavascript...ShowTabs(4);" target=_self>5</A></div>
      </UL>
      </DIV>
      </DIV>
      </DIV>
      <script language="JavaScript" type="text/javascript"> 
      ShowTabs(0);
      </script>
      


      </DIV>
      </body>
      </html>
      


      CSS代碼：
      


      


            




            

CSS代碼：
            


            #main_left{width:248px;float:left;}
            


            UL {
            BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
            }
            #box_tit{text-align:center;margin-left:auto;margin-right:auto;background:#e8e8e8;}
            #box_tit a{text-decoration:none;color:#790292;margin-top:4px;}
            #box_tit a:hover{color:#A00;}
            .focusPic {BACKGROUND: #fff; MARGIN: 0px auto; WIDTH: 224px;font-size:12px;margin-left:auto;margin-right:auto;}
            .textNum {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px}
            .textNum .num {FLOAT: right; OVERFLOW: hidden; WIDTH: 140px; HEIGHT: 18px}
            .textNum .bg0 {BACKGROUND: url(Skin/img/num1.gif)}
            .textNum .bg1 {BACKGROUND: url(Skin/img/num2.gif)}
            .textNum .bg2 {BACKGROUND: url(Skin/img/num3.gif)}
            .textNum .bg3 {BACKGROUND: url(Skin/img/num4.gif)}
            .textNum .bg4 {BACKGROUND: url(Skin/img/num5.gif)}
            .textNum UL {FLOAT: left; WIDTH: 140px;text-align:center;}
            #put_li {display:block; }
            #put_li A {text-decoration:none;display:block;FONT-WEIGHT: bold; FLOAT: left; WIDTH: 25px; margin-right:0px; COLOR: #fff;text-align:center; margin:5px 3px 0px 0px;}
            #put_li A:hover {COLOR: #ff0; }
            


            查看更多 動易Cms教程  動易Cms模板
            

            共2頁上一頁12下一頁
            


            來源：模板無憂//所屬分類：動易Cms教程/更新時間：2007-09-27


            





            


            



            相關動易Cms教程：