468×60サイズの広告バナーのスライダー

2017年6月17日Javascript

実装概要

468×60サイズの広告バナーを設定した秒間隔で、動かすようにします。
おそらく利用するときは、バナーサイズは、各サイズにカスタマイズして利用することになります。
メモとして残しておきます。

実装にあたっては、まずjQueryを読み込ませておく必要があります。

広告用スライダーコード

<style>
.ad_window {
 position: relative;
 overflow: hidden;
 width: 550px;
 height: 80px;
}


.ad_img {position: absolute; }
.ad_img ul li {
 float: left; 
 list-style: none;
 margin: 0;
 padding: 0;
}
</style>

<div class="ad_window">
<div class="ad_img">
<ul>
<li><img width="468" height="60" src="001.jpg"></li>
<li><img width="468" height="60" src="002.jpg"></li>
<li><img width="468" height="60" src="003.jpg"></li>
</ul>
</div>
</div>

<script type="text/javascript">
$(function() {

function adSlide(num,sec){
  var slider = $('.ad_img');
  var count = 0;
  var t = slider.children();
  var s = t.find('li');
  var imageWidth = s.find('img').width();
  var imageLength = s.length;

  t.clone().appendTo(slider);
  slider.css('width', s.length * imageWidth * num);

  setInterval(function() {
   count ++;
   slider.animate({'left' : '-=' +(imageWidth)}, 'slow',function(){
     if(!(count % imageLength)) {
       slider.css({'left': 0});
       count = 0;
     }
   });
  },sec);
}

adSlide(3,2000);//枚数、秒間隔


});
</script>