SOURCE

console 命令行工具 X clear

                    
>
console
// 申明插件
// bannerData: Banner Datas 
$.fn.setBanner = function (bannerData) {
  // 用户自定宽高
  var bannerSize = {
    width: this.attr('banner-width') || 400,
    height: this.attr('banner-height') || 200
  }
  
  this.css(bannerSize);
  
  //根据bannerData生成html字符串
  var htmlString = ''
  $.each(bannerData, function(index, item) {
    htmlString += '<div class="' + item.className + '"><a href="' + (item.url || 'javascript(void:0)') + '"><img src="' + item.imgUrl + '" /></a></div>'
  })
  
  this.append(htmlString)
}


var banners = [
  {
    imgUrl: 'http://img.anywalks.com/s/1/Uploads/article_remote01/2015/10/18/3b5bf4bf3fb8bcbf41348f9e61ca5b32.jpg',
    className: 'abc',
    url: '',
    text: ''
  },
  {
    imgUrl: 'http://img.anywalks.com/s/1/Uploads/article_remote01/2015/10/18/3b5bf4bf3fb8bcbf41348f9e61ca5b32.jpg',
    className: '21313',
    url: '',
    text: ''
  }
]


$('#banner-wrap').setBanner(banners);
<div id="banner-wrap" banner-width="400" banner-height="200"></div>
#banner-wrap {
  margin: 0;
  padding: 0;
  width: 200px;
  height: 200px;
  background: #ccc;
}

/* .abc {
  border: 3px solid red;
} */