UNIRRY

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

サムネが横スライドで大きくなるnextとprevつきイメージギャラリー

imagegallery3

前回、サムネイルのスライド時と、サムネイルクリック時で、メインビジュアルが切り替わるようにしたので、次は「next」と「prev」ボタンを追加しました。ついでに、サムネイルのアクティブをもっとわかりやすくするため、大きさを変更するようにしました。

前回、前々回のもの
・前々回 サムネイルのスライドに合わせて画像を切り替える
・前回 サムネイル操作つきギャラリー風自動スライダーvol.1

まずはhtml

前回のにprevとnextボタンの領域を追加しました。ほかはなにも変わりません。

<div id="fadearea">
<div id="icolist">
  <ul>
    <li id="i1"><img src="sora1.jpg"></li>
    <li><img src="sora2.jpg"></li>
    <li><img src="sora3.jpg"></li>
    <li><img src="sora4.jpg"></li>
    <li><img src="sora5.jpg"></li>
    <li><img src="sora6.jpg"></li>
    <li><img src="sora7.jpg"></li>
  </ul>
</div>
</div>

<div id="nav">
  <ul>
    <li class="selected"><img src="s_sora1.jpg" rel="1"></li>
    <li><img src="s_sora2.jpg" rel="2"></li>
    <li><img src="s_sora3.jpg" rel="3"></li>
    <li><img src="s_sora4.jpg" rel="4"></li>
    <li><img src="s_sora5.jpg" rel="5"></li>
    <li><img src="s_sora6.jpg" rel="6"></li>
    <li><img src="s_sora7.jpg" rel="7"></li>
  </ul>
</div>

<!-- ここからnextとprevボタン -->
<div id="arrow">
<div id="prev"></div>
<div id="next"></div>
</div>

次にcss

前回のにprevとnextボタンのスタイルを追加しました。ほかはなにも変わりません。

#fadearea {
position: relative;
width: 512px;
height: 340px;
margin: 50px auto 7px auto;
overflow: hidden;
}
#icolist {
float: left;
position: relative;
width: 512px;
height: 340px;
}
#icolist li {
position: absolute;
top: 0;
left: 0;
width: 512px;
height: 340px;
list-style: none;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
}
#icolist li#i1 {
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "alpha(opacity=100)";
-moz-opacity: 1;
-khtml-opacity: 1;
left: 0;
}
#nav {
position: relative;
width: 512px;
height: 63px;
overflow: hidden;
margin: 0 auto;
}
#nav ul {
position: relative;
top: 10px;
left: 0;
width: 712px;
height: 63px;
margin: 0 auto 10px auto;
padding: 0;
}
#nav li {
position: relative;
top: 0;
left: 0;
float: left;
width: 77px;
height: 43px;
display: block;
cursor: pointer;
}
/* ここからnextとprevボタンのスタイル */
#arrow {
position: relative;
width: 512px;
margin: 0 auto;
}
#prev,
#next {
position: absolute;
top: -240px;
left: -35px;
width: 19px;
height: 48px;
cursor: pointer;
background: url(prev.png) no-repeat left top;
}
#next {
left: 529px;
background: url(next.png) no-repeat left top;
}
#prev:hover,
#next:hover {
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}

nextとprevを追加して、サムネイルの動作を加えたjs

前回からnextとprev部分を追加しています。サムネイルは、サイズの変更と位置の変更で中心にくるようにしました。あとはコメントどおりです。ループの仕方などは前回のままです。

// 変数定義
var icolist    = $("#icolist ul"),
    navlist = $("#nav ul"),
    prev    = $("#prev"), 
    next    = $("#next");
var autoSlide;

// マウスオーバー関数のよびだしとサムネopacity設定
navHover();
navFade();
$("#nav ul li").not(".selected").css("opacity", "0.5");

// サムネクリック時の挙動
jQuery(document).on("click", "#nav ul li", function(){
  var rell2 = $(this).children("img").attr("rel") - 1;
  // selectedの操作
  $("#nav ul li").removeClass("selected");
  $(this).addClass("selected");
  // 自動スライドの一時停止と開始
  clearInterval(autoSlide);
  autoSlideDo();
  // メインビジュアルフェード関数の実行
  nowidFade(rell2);
  setTimeout(navFade, 300);
});

// nextとprevクリック時の挙動
next.click(function(){
  nextNavi();
  clearInterval(autoSlide);
  autoSlideDo();
});
prev.click(function(){
  prevNavi();
  clearInterval(autoSlide);
  autoSlideDo();
});

// サムネ時のマウスオーバー関数
function navHover() {
  navlist.children("li").on({
      'mouseenter':function(){
          if ( !$(this).is(".selected") ) {
	      $(this).animate({"opacity":"0.7"}, 200, "easeInCubic");
          }
      },
      'mouseleave':function(){
          if ( !$(this).is(".selected") ) {
	      $(this).animate({"opacity":"0.5"}, 200, "easeInCubic");
          }
      }
  });
}

// 6秒ごとにnextNavi関数の呼び出し
function autoSlideDo() {
  autoSlide = setInterval(nextNavi, 6000);
}
  
// このウィンドウにフォーカスを設定してsetinterval実行
$(window).focus();
autoSlideDo();
  
// このウィンドウからフォーカスがはずれたらsetintervalをクリア
$(window).bind("focus",function(){
  clearInterval(autoSlide);
  autoSlideDo();
}).bind("blur",function(){
  clearInterval(autoSlide);
});

// next方向に移動する関数
function nextNavi() {
  var rell = $("#nav ul li:first-child img").attr("rel");	  
  // 最初のサムネをスライドさせて最後にappendする
  $("#nav ul li:first-child").animate({"margin-left": "-90px"}, 300, "easeInCubic", function(){
      // selectedの操作
      $("#nav ul li").removeClass("selected");
      var first = $("#nav ul li:first-child").html();
      $("#nav ul li:first-child").remove();
      $("#nav ul").append( "<li>" + first + "</li>");
      $("#nav ul li:first-child").addClass("selected");
      navFade();
      navHover();
  });
  // メインビジュアルの切り替え実行
  nowidFade(rell);
}

// prev方向に移動する関数
function prevNavi() {
  var rell3 = $("#nav ul li:last-child img").attr("rel") - 1;
  // 最後のサムネをprependして非表示分のcss調整
  var last = $("#nav ul li:last-child").html();
  $("#nav ul").prepend( "<li>" + last + "</li>");
  $("#nav ul li:first-child").css("margin-left", "-90px");
  // 最初のサムネをスライドさせる
  $("#nav ul li:first-child").animate({"margin-left": "0"}, 300, "easeInCubic", function(){
      // selectedの操作
      $("#nav ul li").removeClass("selected");
      $("#nav ul li:last-child").remove();
      $("#nav ul li:first-child").addClass("selected");
      navFade();
      navHover();
  });	  
  // メインビジュアルの切り替え実行
  nowidFade(rell3);
}

// メインビジュアルの切り替え関数
function nowidFade(rell) {
  // rellによってselectedの付与を切り替える
  icolist.children("li").removeClass("selected");
  if ( rell == 7 ) {
      icolist.children("li").eq(0).addClass("selected");
  } else {
      icolist.children("li").eq(rell).addClass("selected");
  }
  // 切り替えアニメーション
  icolist.children("li").not(".selected").animate({"opacity" : "0"}, 1000, "easeInCubic");
  icolist.children("li.selected").animate({"opacity" : "1"}, 1000, "easeInCubic");
}
  
// サムネのアクティブ切り替え関数
function navFade() {
  $("#nav ul li").not(".selected").animate({"width": "77px", "height": "43px", "top": "0","opacity":"0.5"}, 200, "easeOutQuart").children("img").animate({"width": "70px", "height": "43px"}, 200, "easeOutQuart");
  $("#nav ul li.selected").animate({"width": "97px", "top": "-10px", "height": "63px","opacity":"1"}, 200, "easeOutQuart").children("img").animate({"width": "90px", "height": "63px"}, 200, "easeOutQuart");
}

サンプル:サムネが横スライドで大きくなるイメージギャラリー

サンプル

これにアニメーション部分をいろいろパターンつくってみたのがこちら
・アニメーションいろいろ: アニメーション部分をいろいろパターンやってみた


horoscope

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