スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

複数の画像が自動でスライドするカルーセルパネルの作成

カルーセルパネルの作成

複数の画像を枠内でスライド表示させます。
基本的な動きは指定した秒数が経過するごとに画像をスライドさせます。
両サイドにある矢印を押すと手動で画像をスライドさせます。
画像をクリックすると詳細情報、もしくは大きな画像で表示させます。


1.HTMLで表示させる画像をlistタグを作成します。


   <div id="carousel">
      <ul>
       <li><a href="#" ><img src="images/slide01.jpg" width="150" height="225" /></a></li>
       <li><a href="#" ><img src="images/slide02.jpg" width="150" height="225" /></a></li>
       <li><a href="#" ><img src="images/slide03.jpg" width="150" height="225" /></a></li>
       <li><a href="#" ><img src="images/slide04.jpg" width="150" height="225" /></a></li>
       <li><a href="#" ><img src="images/slide05.jpg" width="150" height="225" /></a></li>
     </ul>
   </div>


2.CSSで色や枠の大きさなど詳細設定を作成します。


#carousel * {
 margin: 0;
 padding: 0;
 }

#carousel {
 width: 900px;
 height: 225px;
 text-align: left;
 position: relative;
 margin-top: 0;
 margin-right: 30px;
 margin-bottom: 0;
 margin-left: 30px;
}

#carousel_prev,
#carousel_next {
 top: 0;
 width: 20px;
 height: 225px;
 background: #000;
 cursor: pointer;
 position: absolute;
}
#carousel_prev {
 left: -20px;
 background:transparent url(../images/prev.jpg) no-repeat top left;
}
#carousel_next {
 right: -20px;
 background:transparent url(../images/next.jpg) no-repeat top left;
}

#carousel ul li {
 width: 150px;
 float: left;
 display: inline;
}


/* =======================================
 ClearFixElements
======================================= */
#carousel ul:after {
 content: ".";
 height: 0;
 clear: both;
 display: none;
 visibility: hidden;
}

#carousel ul {
 display: inline-block;
 overflow: hidden;


3.スクリプトでカルーセル部分の動的な部分を作成します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 $('#carousel').each(function(){
  var slideTime = 400;
  var delayTime = 2500;

  var carouselWidth = $(this).width();
  var carouselHeight = $(this).height();
  $(this).append('<div id="carousel_prev"></div><div id="carousel_next"></div>');
  $(this).children('ul').wrapAll('<div id="carousel_wrap"><div id="carousel_move"></div></div>');

  $('#carousel_wrap').css({
   width: (carouselWidth),
   height: (carouselHeight),
   position: 'relative',
   overflow: 'hidden'
  });

  var listWidth = parseInt($('#carousel_move').children('ul').children('li').css('width'));
  var listCount = $('#carousel_move').children('ul').children('li').length;

  var ulWidth = (listWidth)*(listCount);

  $('#carousel_move').css({
   top: '0',
   left: -(ulWidth),
   width: ((ulWidth)*3),
   height: (carouselHeight),
   position: 'absolute'
  });

  $('#carousel_wrap ul').css({
   width: (ulWidth),
   float: 'left'
  });
  $('#carousel_wrap ul').each(function(){
   $(this).clone().prependTo('#carousel_move');
   $(this).clone().appendTo('#carousel_move');
  });

  carouselPosition();

  $('#carousel_prev').click(function(){
   clearInterval(setTimer);
   $('#carousel_move:not(:animated)').animate({left: '+=' + (listWidth)},slideTime,function(){
    carouselPosition();
   });
   timer();
  });

  $('#carousel_next').click(function(){
   clearInterval(setTimer);
   $('#carousel_move:not(:animated)').animate({left: '-=' + (listWidth)},slideTime,function(){
    carouselPosition();
   });
   timer();
  });

  function carouselPosition(){
   var ulLeft = parseInt($('#carousel_move').css('left'));
   var maskWidth = (carouselWidth) - ((listWidth)*(listCount));
   if(ulLeft == ((-(ulWidth))*2) || ulLeft == ((-(ulWidth))*2)+1) {
    $('#carousel_move').css({left:-(ulWidth)});
   } else if(ulLeft == 0) {
    $('#carousel_move').css({left:-(ulWidth)});
   };
  };

  timer();

  function timer() {
   setTimer = setInterval(function(){
    $('#carousel_next').click();
   },delayTime);
  };

 });
});
</script>

■以下の二つの値を変える事によりスライドのスピード調整ができます。
var slideTime = 400;  これは次回動作までの時間
var delayTime = 2500; これは動作そのもののスピード

■スクリプトの中で両サイドのボタンを定義しています。
carousel_prev
carousel_next
ボタンの位置、画像等は前のCSSで定義しています。

■jqueryを使用します。
1行目に記述しているのは、WEBからJqueryを読み込むパターンのもの。
私は自サイトでjquery-1.10.2.min.jsを定義していますので、1行目の代わりに下記の記述をしています。
<script src="js/jquery-1.10.2.min.js"></script>

Google Libraries APIをみんなが共通で使用すると同じjqueryファイルを一度読み込むと
jQueryファイルがキャッシュされ、次回以降はサイト表示スピードが向上するというメリットがあります。
ただし、バージョンが常に変わっていく為、最新版に対応できる記述をしないといけないなど面倒な点もあるみたいです。
詳細は以下のサイトへ

WEBからJqueryを読み込む
http://kihon-no-ki.com/load-jquery-using-google-libraries-api



出来上がりのイメージはこちらの学習サイトのLOOKBOOKコーナーを参照してください。




トラックバック

コメント

コメントを残す

Secret


スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。