UNIRRY

WEBデザインとホロスコープと宇宙のブログ

jQueryで画像のフェード系自動スライダーを自作する vol.2

slide2

画像のフェード系自動スライダーを自作してみたかったのでいろいろやってみたやつの記事vol.2です。

最終的な完成物はこれ

最終的にはサントリーのトップページみたいなスライダーを作るべくロジックを組んでいきました。

最終的な自作スライダー

自動フェードのスライダーで操作部分ものこす

完成物に近づくように、vol.1で、nextとprevの実装、ナビアイコンクリックで画像のフェード操作を作成しました。これに自動フェードを追加します。つくるのは、①nextを押したら右方向で画像がフェード ②prevを押したら左方向で画像がフェード ③nexとprevにあわせて丸アイコンのアクティブが移動 ④丸アイコンクリックで対応した画像がフェード ⑤自動で右方向に画像がフェード です。

html部分(前と一緒)

<div id="fadearea">
<div id="prev"></div>
<div id="icolist">
  <ul>
    <li id="i1"><img src="ico1.png"></li>
    <li><img src="ico2.png"></li>
    <li><img src="ico3.png"></li>
    <li><img src="ico4.png"></li>
    <li><img src="ico5.png"></li>
  </ul>
</div>
<div id="next"></div>
</div>

<div id="nav" class="clear">
<ul>
    <li class="selected"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</div>

js部分

  // 変数定義
  var nowid = 1;
  var icolist = $("#icolist ul"),
      btnlist = $("#nav ul"),
      prev    = $("#prev"),
      next    = $("#next");
  
  // next方向の表示切替関数
  function nextReturn() {
        if (nowid == 5) {
          btnlist.children("li.selected").removeClass("selected");
          btnlist.children("li:first-child").addClass("selected");
          nowid  = 1;
          nowidFade();
        } else {
          btnlist.children("li.selected").removeClass("selected").next().addClass("selected");
          nowid++;
          nowidFade();
        }
  }
  
  // prev方向の表示切替関数
  function prevReturn() {
      if (nowid == 1) {
          btnlist.children("li.selected").removeClass("selected");
          btnlist.children("li:last-child").addClass("selected");
          nowid  = 5;
          nowidFade();
      } else {
          btnlist.children("li.selected").removeClass("selected").prev().addClass("selected");
          nowid --;
          nowidFade();
      }
  }
  
  // 5秒ごとにnext関数の呼び出し
  var autoSlide = setInterval(nextReturn, 5000);
  
  // prevとnextをクリックした時の関数実行
  prev.click(function(){ prevReturn(); });
  next.click(function(){ nextReturn(); });
  
  // 丸アイコンクリック時のselected移動
  $("#nav ul li").click(function(){
      var linum = $("#nav ul li").index(this);
      $("#nav ul li").removeClass("selected");
      $(this).addClass("selected");
      nowid  = linum + 1;
      nowidFade();
  });
  
  // selectedがついているものに対応したliをフェード、ついでに一端setintervalをクリアして再設定
  function nowidFade() {
      icolist.children("li").fadeOut();
      icolist.children("li").eq(nowid - 1).fadeIn();
      clearInterval(autoSlide);
      autoSlide = setInterval(nextReturn, 5000);
  }

css部分

#fadearea {
width: 380px;
height: 200px;
margin-bottom: 10px;
}
#prev,
#next {
float: left;
width: 40px;
height: 110px;
background: #e6f4f7;
cursor: pointer;
text-align: center;
padding-top: 90px;
}
#icolist {
float: left;
position: relative;
width: 300px;
height: 200px;
background: #f5f7ec;
}
#icolist li {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 200px;
text-align: center;
display: none;
list-style: none;
}
#icolist li#i1 {
display: block;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
float: left;
width: 15px;
height: 15px;
background: url(icooff.jpg) no-repeat left top;
display: block;
cursor: pointer;
}
#nav li.selected {
width: 15px;
height: 15px;
background: url(icoon.jpg) no-repeat left top;
display: block;
}

自動で画像をフェードするサンプル

サンプル

しかしながら、ここに記載しているままのコードでは、タブブラウザにて、setinterval関数の挙動がくるったりします。
その回避方法も記載したので、こっちもみてみてね☆

http://unirry.com/jquery_slide_setinterval-638.html


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3