bunner_image_change by auto and navi_buttun

change_bunner.js

$(function(){ 
  
  var items_count=$("#change_advertisements li").size();
  if(items_count < 1) return; //バナーが一つしかない場合は処理を行わない
  
  var interval=7e3;
  var target_index=1;
  
  var change_bunner=function(){
    var target = $("a.advertisement_link:eq("+target_index+")");
    setBunner(target);
  };
  
  var timer_id=setTimeout(change_bunner,interval);

  $("a.advertisement_link").click(function(){
    return setBunner($(this)),!1 //!1を返すことでリンクに飛ばない
  });
  
  var setBunner=function(target){
    var target_img_tag,target_a_tag,replacement_img,replacement_url;
    
    target_img_tag=$("#advertisement_image");
    target_a_tag=$("#advertisement_url");
    replacement_url=target.attr("href");
    replacement_img=target.data("image");
    
    $(".advertisement_link").removeClass("active");
    
    target.addClass("active");
    
    // 表示切り替え効果
    target_img_tag.fadeOut(
      "fast",function(){
        return target_img_tag.attr("src",replacement_img),
        target_img_tag.fadeIn("fast")
      });
      
    target_a_tag.attr("href",replacement_url);
    
    target_index=$("a.advertisement_link").index(target)+1;
    
    target_index >= items_count&&(target_index=0);
    clearTimeout(timer_id);
    timer_id=setTimeout(change_bunner,interval);
  };  
})

index.html

<div class="bunners">
  <a id="advertisement_url" href="hoge.html">
   <img id="advertisement_image" src="/images/banner_hogehoge.jpg" alt="hoge" style="display: inline;">
  </a>
</div>
<ul class='spbtn navi' id='change_advertisements'>
  <li>
    <a class='active advertisement_link' data-image='/images/banner_hogehoge.jpg' href='hoge.html'></a>
  </li>
  <li>
    <a class='advertisement_link' data-image='/images/banner_fugafuga.jpg' href='fuga.html")  %>'></a>
  </li>
  <li>
    <a class='advertisement_link' data-image='/images/banner_piyooiyo.jpg' href='piyo.html'></a>
  </li>
</ul>

style.css

/* navi切り替え画像を用意する */
.navi {
    bottom: 21px;
    left: 10px;
    position: relative;
}
.navi a.active {
    background: url("../images/active.png") ;
}
.navi a {
    background: url("../images/inactive.png") ;
    display: block;
    float: left;
    height: 12px;
    margin: 0 10px 0 0;
    width: 12px;
}