dedeCMS 调用栏目缩略图

制作企业网站首页的时候常常会有这样的板块：板块缩略图+简介，下面是产品或是活动的缩略图滚动（如下图的效果）

注：简介为栏目最新发布文档简介，简介左边缩略图为最新发布文档缩略图。下面是按发布时间排列滚动的栏目文档缩略图。

用dedeCMS 如何在首页调用出这种效果？下面分步介绍

 

调用A栏目最新发布文档缩略图及简介（效果如下图）

 

{dede:arclist typeid='46' row=1}
                            <img style="float:left;" class="img" src="[field:litpic/]" alt="">
                            <p><a href="[field:arcurl/]">[field:description function="cn_substr(@me,350)"/]&nbsp;&nbsp;&hellip;&hellip;</a></p>
    {/dede:arclist}

 

使用文章列表标签，再分别用"[field:litpic/]"及[field:description function="cn_substr(@me,350)"/]调用最新文档缩略图及文档简介，这里限制简介字数为350字。

注：在首页不能直接调用{dede:field.description}标签调用栏目文档内容，{dede:field.description}在首页是无效的标签。具体可参照博客中另一篇文章：dedeCMS 主页调用栏目描述http://blog.csdn.net/dai0941/article/details/21620107

 

调用栏目缩略图（效果如下图）

 

<TABLE border=0 cellSpacing=0 cellPadding=0 width=320 height=140>
  <TR>
    <TD width=13>
    <DIV οnmοuseup=r_left() class="MoveLeft" οnmοuseοver=r_left() title="Turn to left" οnmοusedοwn=r_f_left()></DIV>
    </TD>
    <TD width=280>
      <DIV id=demo class=Scroller>
      <DIV style="FLOAT: left" id=demo1>
      <TABLE border=0 cellSpacing=0 cellPadding=0>
        <TR>
          {dede:arclist   row='5'   typeid='46'    orderby ='pubdate'}
          <td class=ImageArea>
          <a href="[field:arcurl/]" target="_blank"><img src="[field:picname/]" width="121" height="86" style="border:1px solid #cecece" /></a>
          <a href="[field:arcurl/]" target="_blank">[field:title/]</a>
          </td>
{/dede:arclist}  
        </TR>
      </TABLE>
     
     
      </DIV>
      <DIV style="FLOAT: left" id=demo2></DIV>
      </DIV>
    </TD>
    <TD width=13>
    <DIV οnmοuseup=r_right() class="MoveRight" οnmοuseοver=r_right() title="Turn to right" οnmοusedοwn=r_f_right()></DIV>
    </TD>
  </TR>
<script language="javascript" type="text/javascript">
var dir=1
   if(navigator.userAgent.indexOf("MSIE")>0) { 
    var speed=1
   }else{
            var speed=20
      }

var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML
function Marquee(){
 //alert(tab2.offsetWidth+"\n"+tab.scrollLeft)
 
 if (dir<0 &&(tab.scrollLeft<=0)) {//when right running
            //dir=1    
            tab.scrollLeft = 0.5*tab1.offsetWidth;
       }
 if (dir>0 &&(tab.scrollLeft>=(tab1.offsetWidth- tab.scrollLeft))) {//left
            //dir=-1   
            tab.scrollLeft=0;
       }
 tab.scrollLeft+=dir
 tab.οnmοuseοver=function() {clearInterval(MyMar)}
 tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
}
function r_left(){if (dir=-1)dir=1}
function r_right(){if (dir=1)dir=-1}
function r_f_left(){if (dir=-1)dir=10}
function r_f_right(){if (dir=1)dir=-10}

var MyMar=setInterval(Marquee,speed)
</script>
</TABLE>

同样式使用{dede:arclist/}标签，方法大同小异。这里把JS也写出来。