PHP 学习

JTBC PHP版 首页滚动图片调用方法

作者：我就是个世界 发表于：2010-09-04
JTBC PHP版 首页滚动图片调用方法终于搞定了，费了我一晚上的功夫。 分享给大伙儿！  以产品图片调用到网站首页并滚动显示为例。

[b]调用代码[/b]
节点名称：product_rollpic
调用代码：
[code]
{@}<div class="pic">
　　<a target="_blank" href="{$=ii_curl("{$baseurl}", ii_iurl('detail', {$id}, {$urltype}, 'folder={$createfolder};filetype={$createfiletype};time={$time}'))}"><img src="/product/{$image}" alt="{$topic}" height="145" width="220" /></a>
  <p><a target="_blank" href="{$=ii_curl("{$baseurl}", ii_iurl('detail', {$id}, {$urltype}, 'folder={$createfolder};filetype={$createfiletype} ;time={$time}'))}">{$topic}</a></p>
</div>{@}
[/code]
                
[b]首页模板调用方法：[/b]
[code]{$=vv_itransfer('top', 'product_rollpic','topx=6; tnum=40;genre=product; osql= and a_content_images_list <>""""')}[/code]
[color=#FF0000]注意：[/color]genre=  前面不能有空格，否则调用不成功，不知道为什么
[separator]

图片无缝滚动 可左右控制的代码，CSS+JS实现

CSS代码：
[code]
/*--- .product index rollBox ---*/
.product {border: 1px solid #87A1BA;}
.product .title {background: #87A1BA url("head_bg.jpg") repeat-x 0 bottom;height:30px;text-align:left}
.rollBox{height:205px;overflow:hidden;padding:5px 0 5px 0;margin:0 auto;}
.rollBox .LeftBotton{height:52px;width:9px;background:url("rollbutton.gif") no-repeat 0 0;overflow:hidden;float:left;display:inline;margin:50px 0 0 0;cursor:pointer}
.rollBox .RightBotton{height:52px;width:9px;background:url("rollbutton.gif") no-repeat -10px 0;overflow:hidden;float:left;display:inline;margin:50px 0 0 0;cursor:pointer}
.rollBox .Cont{width:928px;overflow:hidden;float:left;margin:0 6px}
.rollBox .ScrCont{width:10000000px}
.rollBox .Cont .pic{width:232px;float:left;text-align:center}
.rollBox .Cont .pic img{padding:6px;background:#fff;display:block;margin:0 auto}
.rollBox .Cont .pic p{line-height:26px;color:#505050}
.rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none}
.rollBox .Cont a:hover{color:#f00;text-decoration:underline}
.rollBox #List1,.rollBox #List2{float:left}
[/code]

HTML代码：
[code]
      <div class="product box">
        <div class="title"><span class="more right"><a href="/product/" target="_blank">更多...</a></span><h2 class="b f14 black">{$=ii_itake('global.lng_menu.product', 'lng')}</h2></div>
        <div class="rollBox">
          <div class="LeftBotton" onMouseDown="ISL_GoUp()" onMouseUp="ISL_StopUp()" onMouseOut="ISL_StopUp()"></div>
          <div class="Cont" id="ISL_Cont">
            <div class="ScrCont">
              <div id="List1">      
              <!-- 图片列表 begin -->
                {$=vv_itransfer('top', 'product_rollpic','topx=6; tnum=40;genre=product; osql= and a_content_images_list <>""""')}
              <!-- 图片列表 end -->        
              </div>
              <div id="List2"></div>
            </div>
          </div>
          <div class="RightBotton" onMouseDown="ISL_GoDown()" onMouseUp="ISL_StopDown()" onMouseOut="ISL_StopDown()"></div>
          </div>
          <div class="clr"></div>
        </div>
        <script language="javascript" type="text/javascript">
          //图片滚动列表
          var Speed = 2; //速度(毫秒)
          var Space = 5; //每次移动(px)
          var PageWidth = 928; //翻页宽度
          var fill = 0; //整体移位
          var MoveLock = false;
          var MoveTimeObj;
          var Comp = 0;
          var AutoPlayObj = null;
          GetObj("List2").innerHTML = GetObj("List1").innerHTML;
          GetObj('ISL_Cont').scrollLeft = fill;
          GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
          GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
          AutoPlay();
          function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
          function AutoPlay(){ //自动滚动
           clearInterval(AutoPlayObj);
           AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000); //间隔时间
          }
          function ISL_GoUp(){ //上翻开始
           if(MoveLock) return;
           clearInterval(AutoPlayObj);
           MoveLock = true;
           MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
          }
          function ISL_StopUp(){ //上翻停止
           clearInterval(MoveTimeObj);
           if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
            Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
            CompScr();
           }else{
            MoveLock = false;
           }
           AutoPlay();
          }
          function ISL_ScrUp(){ //上翻动作
           if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
           GetObj('ISL_Cont').scrollLeft -= Space ;
          }
          function ISL_GoDown(){ //下翻
           clearInterval(MoveTimeObj);
           if(MoveLock) return;
           clearInterval(AutoPlayObj);
           MoveLock = true;
           ISL_ScrDown();
           MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
          }
          function ISL_StopDown(){ //下翻停止
           clearInterval(MoveTimeObj);
           if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
            Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
            CompScr();
           }else{
            MoveLock = false;
           }
           AutoPlay();
          }
          function ISL_ScrDown(){ //下翻动作
           if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}
           GetObj('ISL_Cont').scrollLeft += Space ;
          }
          function CompScr(){
           var num;
           if(Comp == 0){MoveLock = false;return;}
           if(Comp < 0){ //上翻
            if(Comp < -Space){
             Comp += Space;
             num = Space;
            }else{
             num = -Comp;
             Comp = 0;
            }
            GetObj('ISL_Cont').scrollLeft -= num;
            setTimeout('CompScr()',Speed);
           }else{ //下翻
            if(Comp > Space){
             Comp -= Space;
             num = Space;
            }else{
             num = Comp;
             Comp = 0;
            }
            GetObj('ISL_Cont').scrollLeft += num;
            setTimeout('CompScr()',Speed);
           }
          }
        </script>
      </div>
[/code]


调用后的效果代码：
[code]
      <div class="product box">
        <div class="title"><span class="more right"><a href="#" target="_blank">更多...</a></span><h2 class="b f14 black">产品展示</h2></div>
        <div class="rollBox">
          <div class="LeftBotton" onMouseDown="ISL_GoUp()" onMouseUp="ISL_StopUp()" onMouseOut="ISL_StopUp()"></div>
          <div class="Cont" id="ISL_Cont">
            <div class="ScrCont">
              <div id="List1">      
              <!-- 图片列表 begin -->
                <div class="pic">
                  <a href="/" target="_blank"><img src="{$=#global_images_route}theme/{$=#nskin}/rollpic1.jpg" width="220" height="145" /></a>
                  <p><a href="#" target="_blank">产品展示-图片</a></p>
                </div>
                <div class="pic">
                  <a href="/" target="_blank"><img src="{$=#global_images_route}theme/{$=#nskin}/rollpic2.jpg" width="220" height="145" /></a>
                  <p><a href="#" target="_blank">产品展示-滚动图片222</a></p>
                </div>
                <div class="pic">
                  <a href="/" target="_blank"><img src="{$=#global_images_route}theme/{$=#nskin}/rollpic1.jpg" width="220" height="145" /></a>
                  <p><a href="#" target="_blank">产品展示-滚动图片333</a></p>
                </div>
                <div class="pic">
                  <a href="/" target="_blank"><img src="{$=#global_images_route}theme/{$=#nskin}/rollpic2.jpg" width="220" height="145" /></a>
                  <p><a href="#" target="_blank">产品展示-滚动图片444</a></p>
                </div>
                <div class="pic">
                  <a href="/" target="_blank"><img src="{$=#global_images_route}theme/{$=#nskin}/rollpic1.jpg" width="220" height="145" /></a>
                  <p><a href="#" target="_blank">产品展示-滚动图片555</a></p>
                </div>
                <div class="pic">
                  <a href="/" target="_blank"><img src="{$=#global_images_route}theme/{$=#nskin}/rollpic2.jpg" width="220" height="145" /></a>
                  <p><a href="#" target="_blank">产品展示-滚动图片666</a></p>
                </div>
              <!-- 图片列表 end -->        
              </div>
              <div id="List2"></div>
            </div>
          </div>
          <div class="RightBotton" onMouseDown="ISL_GoDown()" onMouseUp="ISL_StopDown()" onMouseOut="ISL_StopDown()"></div>
          </div>
          <div class="clr"></div>
        </div>
        <script language="javascript" type="text/javascript">
          //图片滚动列表
          var Speed = 2; //速度(毫秒)
          var Space = 5; //每次移动(px)
          var PageWidth = 928; //翻页宽度
          var fill = 0; //整体移位
          var MoveLock = false;
          var MoveTimeObj;
          var Comp = 0;
          var AutoPlayObj = null;
          GetObj("List2").innerHTML = GetObj("List1").innerHTML;
          GetObj('ISL_Cont').scrollLeft = fill;
          GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
          GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
          AutoPlay();
          function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
          function AutoPlay(){ //自动滚动
           clearInterval(AutoPlayObj);
           AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000); //间隔时间
          }
          function ISL_GoUp(){ //上翻开始
           if(MoveLock) return;
           clearInterval(AutoPlayObj);
           MoveLock = true;
           MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
          }
          function ISL_StopUp(){ //上翻停止
           clearInterval(MoveTimeObj);
           if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
            Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
            CompScr();
           }else{
            MoveLock = false;
           }
           AutoPlay();
          }
          function ISL_ScrUp(){ //上翻动作
           if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
           GetObj('ISL_Cont').scrollLeft -= Space ;
          }
          function ISL_GoDown(){ //下翻
           clearInterval(MoveTimeObj);
           if(MoveLock) return;
           clearInterval(AutoPlayObj);
           MoveLock = true;
           ISL_ScrDown();
           MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
          }
          function ISL_StopDown(){ //下翻停止
           clearInterval(MoveTimeObj);
           if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
            Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
            CompScr();
           }else{
            MoveLock = false;
           }
           AutoPlay();
          }
          function ISL_ScrDown(){ //下翻动作
           if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}
           GetObj('ISL_Cont').scrollLeft += Space ;
          }
          function CompScr(){
           var num;
           if(Comp == 0){MoveLock = false;return;}
           if(Comp < 0){ //上翻
            if(Comp < -Space){
             Comp += Space;
             num = Space;
            }else{
             num = -Comp;
             Comp = 0;
            }
            GetObj('ISL_Cont').scrollLeft -= num;
            setTimeout('CompScr()',Speed);
           }else{ //下翻
            if(Comp > Space){
             Comp -= Space;
             num = Space;
            }else{
             num = Comp;
             Comp = 0;
            }
            GetObj('ISL_Cont').scrollLeft += num;
            setTimeout('CompScr()',Speed);
           }
          }
        </script>
      </div>
[/code]

分享：

扫一扫在手机阅读、分享本文

已有2条评论