template 模版引擎 ——轮播图

html源代码：

            
   

       

       

       

   

            
   

        

           
        
        

           
       
       

          
       

  
            
  
      
      Previous
  
  
       
       Next
  

 

要实现的效果：

图片滚动，左右箭头可点击，下面原点跟随图片滚动

用代码开始实现：

html页面代码：

模版引擎代码：

js代码：

//初始化轮播图
window.resource("cmsApiArticleList", {columnCode: 'banner'}, function (data) {
    var temp = _.template($("#scrollTemp").text());
    $('[data-scrollPic]').html(temp(data));
}, false);