内容正在载入中，请稍后……
公告
这里是 在路上-个人网站!
Husw! OnRoad
本站－已建立 天
本站永久国际域名:
WwW.Husw.NeT
分类
最新日志
最新评论
搜索
统计
访问次数 7226162
今日访问 132
日志数量 1568
评论数量 272
引用数量 2
留言数量 88
注册用户 699
在线人数 46
其他
登入
注册
申请链接
RSS： 日志 | 评论
编码：UTF-8
XHTML 1.0
关闭横幅广告 关闭左侧栏 关闭右侧栏 窄屏幕 默认屏幕 宽屏幕 自适应屏幕 增加字号 减小字号 订阅RSS
4 Sep.2010

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

作者: 我就是个世界   分类：技术&学习 » PHP 学习   出处：本站原创            大 | 中 | 小
JTBC PHP版 首页滚动图片调用方法终于搞定了，费了我一晚上的功夫。 分享给大伙儿！  以产品图片调用到网站首页并滚动显示为例。

调用代码
节点名称：product_rollpic
调用代码：

{@}<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>{@}

                
首页模板调用方法：
{$=vv_itransfer('top', 'product_rollpic','topx=6; tnum=40;genre=product; osql= and a_content_images_list <>""""')}

注意：genre=  前面不能有空格，否则调用不成功，不知道为什么


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

CSS代码：

/*--- .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}


HTML代码：

      <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>



调用后的效果代码：

      <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>

分享到QQ空间
时间：06:06　评论(2)　引用(0)　阅读(7513)　Tags: , , , ,
222 Email Homepage
March 8, 2017 12:14
节点代码放在哪里的？
我就是个世界 回复于 June 12, 2017 09:29
“调用代码”里面新增"节点",代码放在新增的节点里面
JTBC爱好者
May 14, 2012 17:42
解决了我的大问题，非常感谢！zan
分页： 1/1 第一页 1 最后页
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮
OpenID登入 权限选项 表情