11
2011
11

JTBC 中通过公共管理模块中图片链接来制作幻灯片的方法

jtbc中幻灯片的实现有很多种方法,这里介绍的是通过后台的图片链接来制作幻灯片。大致分为以下5个步骤:

第一步:进入后台-->系统管理-->模板管理,在调用模板中新建一个节点。

   节点名(name):piclink(名字可根据需要写)

XML/HTML Code复制内容到剪贴板
  1. <div class="sub_box">  

  2.   <div id="p-select" class="sub_nav">  

  3.    <div class="sub_more"><a href="/" onfocus="this.blur()" title="查看更多的精品院校" style="font-family: Tahoma; font-size: 12px;" target="_blank">更多>></a></div>  

  4.    <div class="sub_no" id="bd1lfsj">  

  5.     <ul>  

  6.      <li class="show">1</li><li class="">2</li><li class="">3</li><li class="">4</li><li class="">5</li>  

  7.     </ul>  

  8.    </div>  

  9.   </div>  

  10.   <div id="bd1lfimg">  

  11.    <div>  

  12.     <dl class="show"></dl>  

  13.   

  14.          {$}{$$}<dl class="">  

  15.      <dt><a href="{$url}" title="" target="_blank"><img src="support/linkimages/{$image}" alt="{$topic}"></a></dt>  

  16.      <dd>  

  17.       <h2><a href="{$url}" target="_blank">{$topic}</a></h2>  

  18.       <tt><a href="{$url}" target="_blank">{$intro}&hellip;</a></tt>  

  19.      </dd>  

  20.     </dl>{$$}{$}   

  21.   

  22.         </div>  

  23.   </div>  

  24.  </div>  

  25.  <script type="text/javascript">movec();</script>  

 

   节点代码(模板代码tpl_default):

 第二步:在样式表中加入下面代码(控制幻灯片大小及位置的,视项目的不同需要来做相应的调整):

 

CSS Code复制内容到剪贴板
  1. .sub_box{width:445pxheight:230pxfloat:leftposition:relativeoverflow:hiddenborder:1px solid #ccccccbackground:url() center center no-repeat; *background:url() 220px 120px no-repeatmargin:0 5px;}/*11-8 加margin*/  

  2. .sub_box img{border:nonewidth:445pxheight:230px;}   

  3. #bd1lfimg{position:relativewidth:445pxheight:230pxoverflow:hidden;}   

  4. #bd1lfimg div{width:100000pxmargin-left:-4px;}   

  5. #bd1lfimg dl{width:445pxheight:230pxposition:relativeoverflow:hiddenfloat:left;}   

  6. #bd1lfimg dt{width:445pxheight:230pxposition:absoluteleft:0pxtop:0px;}   

  7. #bd1lfimg dd{width:405pxheight:60pxbackground:#000000; filter:alpha(Opacity=70); Opacity:0.7; position:absoluteleft:0pxbottombottom:0pxpadding:0 20px;}   

  8. #bd1lfimg dd h2{height:25pxpadding:8px 0 4px 0; line-height:25pxoverflow:hidden;}   

  9. #bd1lfimg dd h2 a{font-size:14pxfont-weight:boldcolor:#ffffff;}   

  10. #bd1lfimg dd a{color:#fffffftext-decoration:none;}   

  11. #bd1lfimg dd a:hover{text-decoration:nonecolor:#cccccc;}   

  12. #bd1lfimg dd tt{color:#ddddddline-height:1.2em;}   

  13. #bd1lfimg dd tt a:hover{text-decoration:underline;}   

  14. .sub_nav{width:445pxheight:25pxbottombottom:0pxposition:absolutecolor:#999999z-index:200;}   

  15. .sub_no{height:25pxfloat:rightright;}   

  16. .sub_no li{display:blockwidth:25pxheight:25pxfloat:leftoverflow:hiddenline-height:25pxvertical-align:middletext-align:centerbackground:#000000; filter:alpha(Opacity=70); Opacity:0.7; font-family:Arialfont-size:11pxcolor:#999999cursor:pointer;}   

  17. .sub_no li.show{background:#ffffffcolor:#000000;}   

  18. .sub_more{float:rightrightwidth:50pxheight:25pxbackground:#000000; filter:alpha(Opacity=70); Opacity:0.7; color:#999999text-align:centerline-height:25px;}   

  19. .sub_more a{color:#999999;}   

  20. .sub_more a:hover{color:#cccccctext-decoration:none;}   

 

第三步:打开common\images\js\main.js文件,在底部加入如下代码

JavaScript Code复制内容到剪贴板
  1. //选择器   

  2. function $a(id,tag){var re=(id&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}}   

  3.   

  4. //焦点滚动图 点击移动   

  5. function movec()   

  6. {   

  7.  var o=$a("bd1lfimg","");   

  8.  var oli=$a("bd1lfimg","dl");   

  9.     var oliw=oli[0].offsetWidth; //每次移动的宽度     

  10.  var ow=o.offsetWidth-2;   

  11.  var dnow=0; //当前位置    

  12.  var olf=oliw-(ow-oliw+10)/2;   

  13.   o["scrollLeft"]=olf+(dnow*oliw);   

  14.  var rqbd=$a("bd1lfsj","ul")[0];   

  15.  var extime;   

  16.   

  17.  <!--for(var i=1;i<oli.length;i++){rqbd.innerHTML+="<li>"+i+"</li>";}-->   

  18.  var rq=$a("bd1lfsj","li");   

  19.  for(var i=0;i<rq.length;i++){reg(i);};   

  20.  oli[dnow].className=rq[dnow].className="show";   

  21.  var wwww=setInterval(uu,2000);   

  22.   

  23.  function reg(i){rq[i].onclick=function(){oli[dnow].className=rq[dnow].className="";dnow=i;oli[dnow].className=rq[dnow].className="show";mv();}}   

  24.  function mv(){clearInterval(extime);clearInterval(wwww);extime=setInterval(bc,15);wwww=setInterval(uu,8000);}   

  25.  function bc()   

  26.  {   

  27.   var ns=((dnow*oliw+olf)-o["scrollLeft"]);   

  28.   var v=ns>0?Math.ceil(ns/10):Math.floor(ns/10);   

  29.   o["scrollLeft"]+=v;if(v==0){clearInterval(extime);oli[dnow].className=rq[dnow].className="show";v=null;}   

  30.  }   

  31.  function uu()   

  32.  {   

  33.   if(dnow<oli.length-2)   

  34.   {   

  35.    oli[dnow].className=rq[dnow].className="";   

  36.    dnow++;   

  37.    oli[dnow].className=rq[dnow].className="show";   

  38.   }   

  39.   else{oli[dnow].className=rq[dnow].className="";dnow=0;oli[dnow].className=rq[dnow].className="show";}   

  40.   mv();   

  41.  }   

  42.  o.onmouseover=function(){clearInterval(extime);clearInterval(wwww);}   

  43.  o.onmouseout=function(){extime=setInterval(bc,15);wwww=setInterval(uu,8000);}   

  44. }   

  45.   

 

第四步:在公共管理模块的图片链中添加5张图片。

第五部:在要显示的页面添加调用代码:

         {$=itransfer('top', 'piclink','topx=5;tnum=30;genre=support/linkimages')},这段代码的意思是调用后台公共管理模块的图片链接中的前5张图片,来作为幻灯片的展示图片。
 

演示案例:http://www.yuanhuaguanggao.com/()

      代码中难免会有问题,敬请谅解。如需帮助请留言,我会及时回复。

« 上一篇 下一篇 »

评论列表:

1.匿名  2012-03-16 01:56:03 回复该评论
注意,图片链接在首页调用的话需要在数据库中的 “图片链接”表中加入 hidden 字段(数值型 默认值 0)。具体可以参考jtbc论坛中的“大象”制作的视频教程很详细。
由 qihui 于 2013-8-23 9:27:48 最后编辑
这个很强大,收下了,问个小白问题,用这个{$topic}调用文章标题,怎么设置显示字数和显示条数?
由 qihui 于 2012-3-20 19:49:25 最后编辑
2.qihui  2012-03-20 19:47:28 回复该评论
{$topic}是显示整个标题内容,如果调用文章列表要用{$=itransfer('top', '1', 'topx=10;tnum=30;genre=article')},这个函数。top指最近更新的数据,1指是用的模板,topx指指要调用的显示条数,tnum指要显示的字数,genres指要调用的模块名
3.lyg  2013-08-22 17:12:49 回复该评论
放在首页或其他页面都空白,后台后乱码了,什么原因啊?
3.qihui  2013-08-23 09:20:43 回复该评论
看数据库中表 jtbc_support_linkimages 是否添加了 l_hidden 字段
4.qihui  2013-09-18 23:21:39 回复该评论
默认数据库标是没有 l_hidden 字段的,如不加这个字段,前台调用会出现乱码 提示 缺少至少一个参数
5.qihui  2012-03-20 19:47:28 回复该评论
{$topic}是显示整个标题内容,如果调用文章列表要用{$=itransfer('top', '1', 'topx=10;tnum=30;genre=article')},这个函数。top指最近更新的数据,1指是用的模板,topx指指要调用的显示条数,tnum指要显示的字数,genres指要调用的模块名
6.qihui  2013-08-23 09:20:43 回复该评论
看数据库中表 jtbc_support_linkimages 是否添加了 l_hidden 字段
7.qq  2015-09-04 22:04:34 回复该评论
这个不行啊,首页调用后可以显示,但是不显示图片
8.qq  2015-09-04 22:17:40 回复该评论
自己解决了,自己尝试换一种样式,思路很好,学习了高手啊

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。