如何通過按鈕控制的圖片上下翻滾效果_動易Cms教程

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!

        最近感覺頁面中動的東西太多,顯得太雜太亂,于是想把原來向左連續滾動的圖片欄改為單擊后向上或向下翻滾。如圖:

      http://www.jzxx.net/

        代碼如下,其中紅色的部分是實現自動滾動功能(演示地址:http://www.jzxx.net/bb.htm)的,不想要的朋友可以去掉,我就是其中之一。(經測試,可以實現3組甚至更多組圖片的滾動

      <ul onmouseover="clearInterval(interval01);" onmouseout="iniautoslide();">
      <li>
      <div id="mainpic">
      <div id="f1"><!--{$GetPicPhoto(3,28,true,0,5,false,false,0,1,1,111,71,30,0,false,10)}--></div>
      <div id="f2"><!--{$GetPicPhoto(3,22,true,0,5,false,false,0,1,1,111,71,30,0,false,10)}--></div>
      </div>
      </li>
      <li id="piccon">
      <div id="upbtn" onclick="slideup();" style="display: none;"></div>
      <div class="NUM2" id="led1">1</div>
      <div class="NUM1" id="led2">2</div>
      <div id="downbtn" onclick="slidedown();"></div>
      </li>
      </ul>
      <style type="text/css">
      ul {
      clear: both;
      }
      li {
      float: left;
      list-style-type: none;
      }
      #mainpic {
      overflow: hidden;
      width:750px;
      height:110px;
      position:relative;
      }
      #f1 {
      position:absolute;
      width:750px;
      height:110px;
      z-index:10;
      left:0px;
      top: 0px;
      }
      #f2 {
      position:absolute;
      width:750px;
      height:110px;
      z-index:10;
      left:0px;
      top: 110px;
      display:none;
      }
      #upbtn {
      background: url(/images/tec_scr_lp_004.gif) no-repeat;
      width: 24px;
      height: 29px;
      margin-bottom: 2px;
      margin-left: 1px;
      cursor: hand;
      }
      #downbtn {
      background: url(/images/tec_scr_lp_005.gif) no-repeat;
      margin-left: 1px;
      width: 24px;
      height: 30px;
      cursor:hand;
      }
      #led1 {
      height: 19px;
      margin-bottom: 2px;
      }
      #led2 {
      height: 19px;
      margin-bottom: 3px;
      }
      #piccon {
      margin-top: 14px;
      }
      .NUM1{
      background: url(/images/tec_scr_lp_007.gif) no-repeat left;
      color: #006;
      padding-left:10px;
      line-height: 19px;
      }
      .NUM2{
      background: url(/images/tec_scr_lp_006.gif) no-repeat left;
      color:#fff;
      padding-left:10px;
      line-height: 19px;
      }
      </style>
      <script type="text/javascript">
      var currentF=1;
      var frameheight = 110;
      var scrolling=0;
      var speed = 8;
      var total=2; //增加一個總組數的變量,要更多組圖片實現滾動的朋友可修改該值
      //并且在上面相應代碼后面添加
      //<div id="f3"><!--{$GetPicPhoto(3,28,true,0,5,false,false,0,1,1,111,71,30,0,false,10)}--></div> ……(以此類推)

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

      共2頁上一頁12下一頁
      來源:模板無憂//所屬分類:動易Cms教程/更新時間:2006-05-22
      相關動易Cms教程