Ротатор Flash баннеров

23 апреля 2013

Простой ротатор Flash баннеров.
Ничего нового, но подходящих мне решений подобной задачи не нашёл.
Позволяет добавить на одну страницу несколько баннеров одинакового размера, поочерёдно прокручивая их.


Сам ротатор:

if(!HMRban) {
  var HMRban = {
    '_timer' : null,
    '_delay' : 5000,
    '_count' : 0,
    '_curr'  : 0,
    'show' : function(elements, container, width, height) {
      container = document.getElementById(container);
      if(!container) return;
      divs = '';
      as = '';
      this._count = elements.length;
      for(var i =0; i < this._count; i++) {
        divs += this.getElement(elements[i], width, height, i); 
        as += this.getA(i);
      }
      container.innerHTML = '<div style="width:'+width+'px;height:'+height+'px;position:relative">'+divs +
        (this._count > 1 ? '<div style="position:absolute;right:20px;bottom:20px;">'+
        as+'</div>' : '') + '</div>';
      this.view(0);
    },
    'getElement' : function(src, width, height, i) {
      var res = '<div style="width:'+width+'px;height:'+height+'px;'+(i>0 ? 'display:none':'')+
        ';position:absolute;top:0;left:0" id="HMRban'+i+'" class="hm-rban">'+
        '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="'+width+'" height="'+height+'">'+
        '<param name="movie" value="'+src+'" /><param name="quality" value="high" /><param name="wmode" value="opaque" />'+
        '<embed src="'+src+'" quality="high" width="'+width+'" height="'+height+'" name="mymoviename" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>'+
        '</object>'+
        '</div>';
      return res;
    },
    'getA' : function(num) {
      var res = '<a href="javascript:void(0)" onclick="HMRban.view('+num+')" '+
        'class="hm-a" id="HMA'+num+'">'+num+'</a>';
      return res;
    },
    'view' : function(num) {
      // @TODO: remove jQuery
      $('.hm-a').removeClass('hm-a__selected');
      $('#HMA'+num).addClass('hm-a__selected');
      $('.hm-rban').fadeOut(500);
      $('#HMRban'+num).fadeIn(500);
      this._curr = num;
      if(this._timer) clearTimeout(this._timer);
      this._timer = setTimeout('HMRban.view('+((num + 1) % this._count)+')', this._delay);
    }
  }
}

Немного стилей:

.hm-a {
  background:url('bg-hm-selector.png') 0 0 no-repeat;
  text-indent:-90px;
  margin:0 0 0 5px;
  overflow:hidden;
  display:block;
  height:10px;
  float:left;
  width:10px;
}
.hm-a__selected {
  background-position:0 -10px;
}

Ну и пример:

<div id="test"></div>
<script type="text/javascript">
HMRban.show([
'banner1.swf?link1=http://47.kiev.ua',
'banner2.swf?link1=http://47.kiev.ua'
], 'test', 300, 250)
</script>

Написать комментарий