UNIRRY

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

自動スライド&サムネイル操作つきのギャラリー風スライダー

imagegallery2

サムネイルのスライドに合わせてメインビジュアルが切り替わる簡易的なサンプルを前回つくったので、今度はそれに、ナビのサムネイルクリック時にもメインビジュアルが変更するように追加します。

前回のもの
サムネイルのスライドに合わせてメインビジュアルをフェードさせる

まずはhtml

前回とほぼほぼ変わりませんが、ナビのimgタグだけ、relを追加しました。relの値によって、メインビジュアルの画像を切り替えるためです。

<div id="fadearea">
<div id="icolist">
  <ul>
    <li class="selected"><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" class="clear">
  <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>

次にcss

前回となにも変わりません。

#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.selected {
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: 53px;
overflow: hidden;
margin: 0 auto;
}
#nav ul {
position: relative;
top: 0;
left: 0;
width: 612px;
margin: 0 auto 10px auto;
padding: 0;
}
#nav li {
position: relative;
top: 0;
left: 0;
float: left;
width: 87px;
height: 53px;
display: block;
cursor: pointer;
} 

サムネイルスライド&サムネイルクリック操作つきのjs

前回は、サムネイルが移動すると同時にメインビジュアルも変更するよう、同じ関数内に処理をいれていたのですが、サムネイルのクリック時にも、対応したメインビジュアルをフェードさせたいので、サムネイルの移動と、メインビジュアルの切り替えを、別の関数として用意しました。

また、どのサムネイルが選ばれているかわかるように、サムネイルのopacity操作を、ページ読み込み時と、マウスオーバー時と、右方向にサムネイルがスライドした後と、ナビクリックでselectedが移動した後の、4つに便宜設定しています。(ナビのopacity操作、ナビクリック時のマウスオーバー関数ってとこ)
でもよくよくみると、animateで後追い的に変わるので、cssでパキっと変えたほうがいいかもです。^○^うぇひー

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

// ナビのopacity操作
navHover();
$("#nav ul li").not(".selected").css("opacity","0.5");

// ナビクリック時のマウスオーバー関数
function navHover() {
  navlist.children("li").on({
      'mouseenter':function(){
          if ( !$(this).is(".selected") ) {
            $(this).animate({"opacity": "0.7"}, 100, "easeOutQuart");
      }
      },
      'mouseleave':function(){
          if ( !$(this).is(".selected") ) {
            $(this).animate({"opacity": "0.5"}, 100, "easeOutQuart");
	  }
      }
  });
}

// ナビクリック時のselected移動
jQuery(document).on("click", "#nav ul li", function(){
  // img部分のrel取得
  var rell2 = $(this).children("img").attr("rel") - 1;
  $("#nav ul li").removeClass("selected");
  $(this).addClass("selected");
  // ナビのopacity操作
  $("#nav ul li").not(".selected").animate({"opacity":"0.5"}, 400, "easeInCubic");
  $("#nav ul li.selected").animate({"opacity":"1"}, 400, "easeInCubic");
  // 自動切り替えを一度停止して再実行  
  clearInterval(autoSlide);
  autoSlideDo();
  // メインビジュアルのフェードを実行
  nowidFade(rell2);  
});

// 6秒ごとにnext関数の呼び出し
function autoSlideDo() {
    autoSlide = setInterval(nextNavi, 6000);
}
  
// このウィンドウにフォーカスを設定してsetinterval実行
$(window).focus();
autoSlideDo();
  
// このウィンドウからフォーカスがはずれたらsetintervalをクリア
$(window).bind("focus",function(){
    clearInterval(autoSlide);
    autoSlideDo();
}).bind("blur",function(){
    clearInterval(autoSlide);
});
  
// 右方向へのサムネイルの移動関数
function nextNavi() {
  // img部分のrel取得
  var rell = $("#nav ul li:first-child img").attr("rel");
  // ナビゲーションの移動とコールバック関数で追加操作
  $("#nav ul li:first-child").animate({"margin-left": "-90px"}, 400, "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").css({"margin-left":"0"}).addClass("selected");
      // ナビのopacity操作
      $("#nav ul li").not(".selected").animate({"opacity":"0.5"}, 400, "easeInCubic");
      $("#nav ul li.selected").animate({"opacity":"1"}, 400, "easeInCubic");	  
      navHover();
  });	  
  // メインビジュアルの切り替え関数を実行
  nowidFade(rell);
}

// メインビジュアルの切り替え関数
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({"left": "-50px", "opacity" : "0"}, 400, "easeInCubic", function(){
      icolist.children("li").not(".selected").css("left","0");
  });
  icolist.children("li.selected").animate({"left": "0px", "opacity" : "1"}, 400, "easeInCubic");
}

サンプル:メインビジュアル画像を自動で切り替える②(サムネイルスライド&操作つき)

サンプル

これにnextとprevボタンを追加してサムネイルの大きさを変えるようにしたのがこちら
・nextとprevボタン追加: サムネが横スライドで大きくなるイメージギャラリー
・アニメーションいろいろ: アニメーション部分をいろいろパターンやってみたイメージギャラリー


horoscope

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