UNIRRY

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

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

slide1

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

最終的な完成物はこれ

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

最終的な自作スライダー

とりあえず、nextとprevで画像をフェードするスライダーをつくる

完成物に近づくように、とりあえずまずは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">
    <span class="selected"></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

js部分

//変数定義
var nowid = 1;
var icolist = $("#icolist ul"),
    btnlist = $("#nav"),
    prev    = $("#prev"),
    next    = $("#next");
  
//prev領域を押した時の動作
  prev.click(function(){
      if (nowid == 1) {
          icolist.children("li:visible").fadeOut();
          icolist.children("li:last-child").fadeIn();
          btnlist.children("span.selected").removeClass("selected");
          btnlist.children("span:last-child").addClass("selected");
          nowid = 5;
      } else {
          icolist.children("li:visible").fadeOut().prev().fadeIn();
          btnlist.children("span.selected").removeClass("selected").prev().addClass("selected");;
          nowid --;
      }
  });

//next領域を押した時の動作
  next.click(function(){
      if (nowid == 5) {
          icolist.children("li:visible").fadeOut();
          icolist.children("li:first-child").fadeIn();
          btnlist.children("span.selected").removeClass("selected");
          btnlist.children("span:first-child").addClass("selected");
          nowid = 1;
      } else {
          icolist.children("li:visible").fadeOut().next().fadeIn();
          btnlist.children("span.selected").removeClass("selected").next().addClass("selected");
          nowid ++;
      }
  });

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 span {
float: left;
width: 15px;
height: 15px;
background: url(icooff.jpg) no-repeat left top;
display: block;
}
#nav span.selected {
width: 15px;
height: 15px;
background: url(icoon.jpg) no-repeat left top;
display: block;
}

nextとprevで画像をフェードするサンプル

サンプル

ナビクリックで画像フェードを加えたサンプル

js部分に丸アイコンクリック時の挙動を追加

  $("#nav ul li").click(function(){
      var linum = $("#nav ul li").index(this);
      icolist.children("li").fadeOut();
      icolist.children("li").eq(linum).fadeIn();
      $("#nav ul li").removeClass("selected");
      $(this).addClass("selected");
      nowid = linum + 1;
  });

サンプル

このあと自動フェードを追加したのはこちら

http://unirry.com/jquery_slider_pattern2-621.html

ねむいー!ねむいよー!


horoscope

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