头条图文信息列表估计大家在项目中用的比较多，应该不会很陌生吧！但带切换效果的估计大家很少遇到吧，最近有客户想要这种效果，看了下也不算难，又没有超出模板定制的范围就帮客户弄一下咯！效果图大家可以参考上图，由于近期项目比较多，项目都比较赶，只用了最简单的方法来实现，估计还有很大的优化空间。下面就来讲解一下这个如何实现。

　　第一、以“头条图文信息列表_普通式”为基础进行修改，新的样式类标签大家看实际使用情况来命名，我这里的命名为“头条图文信息列表_带切换”。

　　第二、分别找到头条的代码段和非头条的代码段，头条部分可以按照焦点图的部分进行修改，非头条列表弄个ul把它入进去就可以了，这里由于代码太长了，不好截图我就不截了，大家可以参考下下面的代码。

 
 
    
   
    
  
 
        
   

      
 
    
  
 
    
  
 
    
   
 
        
    
       
              ｛插入头条列表的代码段｝ 
            
      
    
   
 
    
  
 

 
 
 
 
 

 
 
    
  
     
        ｛插入非头条列表的代码段｝ 
        
    

 
 

　　第三、模板调用和CSS修改，CSS根据实际使用会不所不同，我就不列了来了，有需要的童鞋可以到海淀外国语学校的新获取一下，估计这几天就上线了；下面是模板调用的代码，切换ID通过“optionalExtend”来指定，可选扩展参数默认就有的，不用再新建；

 
 
    
  
 
        
   {PE.Label id="取得节点名称带链接" nodeId="264"/}
    
 
        
   {PE.Label id="取得节点名称带链接" nodeId="265"/}
    
 
        
   {PE.Label id="取得节点名称带链接" nodeId="266"/}
    
 
        
   {PE.Label id="取得节点名称带链接" nodeId="267"/}
    
 
    
  
 
    
  
 
        
   

     
            {PE.Label id="头条图文信息列表" bindStyle="带切换" displayDateTime="mm-dd" outputQty="8" titleLength="34" nodes="0" displayTips="true" topicNum="4"  topicTitleLength="28" contentLength="150" optionalExtend="topPicConListTab_01" topicContentLength="120" imageWidth="198" imageHeight="111"  listOrderType="3" optionalCond="and isNews = 1"/} 
        
   
 
        
   

     
            {PE.Label id="头条图文信息列表" bindStyle="点击带切换" outputQty="8" titleLength="34" nodes="2,3,4,5,6,7,8,83" displayTips="true" topicNum="4"  topicTitleLength="28" contentLength="150" optionalExtend="topPicConListTab_02" topicContentLength="120" imageWidth="198" imageHeight="111"  listOrderType="5"/} 
        
   
 
        
   

     
            {PE.Label id="头条图文信息列表" bindStyle="评论带切换" outputQty="8" titleLength="34" nodes="2,3,4,5,6,7,8,83" displayTips="true" topicNum="4"  topicTitleLength="28" contentLength="150" optionalExtend="topPicConListTab_03" topicContentLength="120" imageWidth="198" imageHeight="111"  listOrderType="7"/} 
        
   
 
        
   

     
            {PE.Label id="头条图文信息列表（心情）" moodId="2" bindStyle="带切换" outputQty="8" titleLength="34" nodes="0" displayTips="true" topicNum="4"  topicTitleLength="28" contentLength="150" optionalExtend="topPicConListTab_04" topicContentLength="120" imageWidth="198" imageHeight="111"  listOrderType="23"/}