UNIRRY

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

サムネイルのスライドに合わせてメイン画像を切り替える

imagegallery1

この前つくった自作のスライドショーから派生して、いろいろアニメーションだとかをいじくってイメージギャラリーっぽいものができたので、そのまとめ①になります。前回は、丸アイコンで何番目がアクティブかを切り替えていきましたが、今度はサムネイルもスライドさせてギャラリー風のものにしてみました。

この前つくったスライドショー
nextとprevで移動するかんたんスライド
上のに自動スライドとループをプラスしたもの
setinterval関数のスタックの解除

つくるのは、とりあえずまずは、①サムネイルが左方向にスライドする ②スライドしたサムネイルにあわせて、メインビジュアルが切り替わる です。

まずはhtml

丸アイコンの時とさして変わりませんが、サムネイル(ナビ)部分は、一番目を左方向にスライドさせて、画面から消えたら削除、その後一番後ろに追加(append)っていう仕組みにしました。すぐ思い浮かんだのがそれしかなかったのでそうしてみまミた。とはいえスライドショーはいっぱいプラグインもあるし、いろんなやり方があるんですが絶対に。

<div id="fadearea">
<div id="icolist">
  <ul>
    <li id="i1" 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"></li>
    <li><img src="s_sora2.jpg"></li>
    <li><img src="s_sora3.jpg"></li>
    <li><img src="s_sora4.jpg"></li>
    <li><img src="s_sora5.jpg"></li>
    <li><img src="s_sora6.jpg"></li>
    <li><img src="s_sora7.jpg"></li>
  </ul>
</div>

次にCSS

cssは前回のスライドショーとさして変わりません。

#fadearea {
position: relative;
width: 512px;
height: 340px;
margin: 50px auto 7px auto;
overflow: hidden;
}
#icolist {
float: left;
position: relative;
width: 512px;
height: 340px;
background: #333333;
}
#icolist li {
position: absolute;
top: 0;
left: 0;
width: 512px;
height: 340px;
text-align: center;
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

この記事でつくるのは、もととなる部分だけです。サムネイルが左にスライドして、対応したメインビジュアルがフェードイン、それをずっとループです。ループは前回と同じくsetintervalで実行しています。サムネイルの左スライドはmargin-leftでマイナス値を指定して実現しました。サムネイルのループは、スライド後に、一番はじめのlistを最後に移動させることで実現しています。

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

// 5秒ごとにnext関数の呼び出し
function autoSlideDo() {
    autoSlide = setInterval(nextNavi, 5000);
}

// このウィンドウにフォーカスを設定してsetinterval実行
$(window).focus();
autoSlideDo();
  
// このウィンドウからフォーカスがはずれたらsetintervalをクリア
$(window).bind("focus",function(){
    clearInterval(autoSlide);
    autoSlideDo();
}).bind("blur",function(){
    clearInterval(autoSlide);
});
  
// サムネイルの移動と一番目にClassの追加
function nextNavi() {

  // ナビゲーションの移動
  $("#nav ul li:first-child").animate({"margin-left": "-90px"}, 400, "easeInCubic", function(){
    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");
  });
	  
  // メイン画像の移動
  $("#icolist ul li.selected").animate({"opacity": "0"}, 400, "easeInCubic", function(){
    var first = $("#icolist ul li:first-child").html();
    $("#icolist ul li:first-child").remove();
    $("#icolist ul").append( "<li>" + first + "</li>");
    $("#icolist ul li:first-child").css("opacity","1").addClass("selected");
    $("#icolist ul li:first-child").next().css("opacity","0").addClass("selected2");
  });
  $("#icolist ul li.selected2").animate({"opacity": "1"}, 400, "easeInCubic");
  
}

イメージギャラリーのもととなるサンプル

サンプル

これに、サムネイルクリックでもメインビジュアルが切り替わるようにしたやつはこちら。
自動スライド&サムネイル操作つきのギャラリー風スライダー


horoscope

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