JavaScript + Ajax 実践サンプル集

垂直方向に回転するスライド

説明補足説明コードコメント投稿

このサンプルは、イメージを垂直方向に回転させて表示します。carousel()関数の引数を変えることにより、下位方向または上位方向に回転させることができます。イメージには、リンクを貼ったり、タイトルを付けることができます。また、イメージのボーダーとボーダーの色も設定できます。イメージ上にマウスを移動すると回転をポーズします。

このサンプルを編集して試してみる | 新着サンプルのメールを受け取る

メルマガ登録！ (ドラッグ＆リサイズ可)

苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。このウィンドウは、任意の場所に移動したりリサイズすることができます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Vertical Carousel Slideshow</title>
<script type='text/javascript'>

/***********************************************
* Carousel Slideshow II- By Harry Armadillo 
* (http://www.codingforums.com/showthread.php?t=58814)
***********************************************/

function carousel(params){
  if(!(params.width>0 && isFinite(params.width)))params.width=100;
  if(!(params.height>0 && isFinite(params.height)))params.height=100;
  if(!(params.sides>2 && isFinite(params.sides)))params.sides=4;
  if(!(params.steps>0 && params.steps<100 && isFinite(params.steps)))params.steps=20;
  if(!(params.speed>0 && isFinite(params.speed)))params.speed=8;
  if(!(params.image_border_width>=0 && isFinite(params.image_border_width)))params.image_border_width=0;
  if(isFinite(params.id)||!params.id)params.id='bad_id_given_'+Math.random();
  
  document.write("<div style='position:relative;overflow:hidden;' id='"+params.id.replace(/[^a-zA-Z0-9]+/g,'_')+"'></div>");
  var cdiv=document.getElementById(params.id.replace(/[^a-zA-Z0-9]+/g,'_'))
  cdiv.style.width=params.width+'px';
  cdiv.style.height=params.height+'px';
  cdiv.style.border=params.border;
  cdiv.style.position='relative';
  cdiv.style.overflow='hidden';
  cdiv.title=params.id;
    
  var counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/params.speed)-5;
  interval=isNaN(interval)?200:interval;
  var img_position=[],images=[],img_dimension=[];
  var img_index=params.images.length+1,img_index_cap=2*params.images.length;
  var faces=Math.ceil(params.sides/2), dimension, direction, targ, attr, faraway;

if(params.titles && params.titles[i] && params.titles[i]!='')
        images[i].title=params.titles[i];
      if(document.all)
        images[i].alt=images[i].title;
      images[i+params.images.length]=images[i];
      if(params.images.length==faces)
        images[i+2*params.images.length]=images[i];
      cdiv.appendChild(images[i]);
      }
  
    var face_size=params.size_mode=='image'?params[dimension]:params[dimension]*Math.sin(Math.PI/params.sides);
    var face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)/2-.5;
    var pi_piece=2*Math.PI/params.steps/params.sides;
    for(i=0;i<=params.steps*faces;i++){
      img_dimension[i]=face_size*Math.sin(pi_piece*i);
      img_position[i]=(i<params.steps*params.sides/2)?Math.floor(params[dimension]/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offset*Math.cos(pi_piece*i)-img_dimension[i]/2)+'px':faraway;
      img_dimension[i]=img_dimension[i]-2*params.image_border_width>1?Math.ceil(img_dimension[i])-2*params.image_border_width+'px':'1px';
      }
    }
  init();

cdiv.rotate = function(){
    setTimeout('document.getElementById("'+cdiv.id+'").rotate()',interval);
    if(!spinning) return;
    if(++counter>=params.steps){
      counter=0;
      if(++img_index>=img_index_cap)
        img_index=params.images.length;
      }
    images[img_index-faces].style[direction]=faraway;
    for(var i=faces-1;i>=0;i--){
      images[img_index-i].style[direction]=img_position[counter+i*params.steps];
      images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps];
      }
    }
  cdiv.onmouseover=function(){
    spinning=false;
    }
  cdiv.onmouseout=function(){
    spinning=true;
    }
  setTimeout('document.getElementById("'+cdiv.id+'").rotate()',100);
  }
</script>
</head>
<body>

</body>
</html>

このサンプルを編集して試してみる!

carousel()関数の引数：

carousel(
 {id:'Amazon Books',
  border:'',
  size_mode:'image',
  width:107,
  height:140,
  sides:8,
  steps:8,
  speed:4,
  direction:'top', // top | bottom
  images:['images/P/0596004672.01.MZZZZZZZ.jpg',
          'images/P/0201730847.01.MZZZZZZZ.jpg',
          'images/P/0201735687.01.MZZZZZZZ.jpg',
          'images/P/0596005768.01._SCMZZZZZZZ_.jpg'],
  links: ['http://jsajax.com',
          'http://jsajax.com',
          'http://jsajax.com',
          'http://jsajax.com'],
  lnk_base:'',
  lnk_targets:['_blank',
               '_blank',
               '_blank',
               '_blank' ],
  lnk_attr:['width=700,height=600,top=200,menubar=yes', 
            'width=700,height=600,left=400,scrollbars=yes',
            'width=750,height=550,left=300,top=100',
            'width=700,height=600,left=400,scrollbars=yes'],
  titles:['Opens in blank window',
          'Opens in blank window',
          'Opens in blank window',
          'Opens in blank window'],
  image_border_width:1,
  image_border_color:'black'
 }
);

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

垂直方向に回転するスライド