スライドショー１５_２面白原本Carousel Slideshow

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>スライドショー１５_２面白原本Carousel Slideshow</title>

<script type="text/javascript">
/***********************************************
* Carousel Slideshow II- By Harry Armadillo (http://www.codingforums.com/showthread.php?t=58814)
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Please keep this notice intact
***********************************************/

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(/[\r\n\t ]+/g,'_')+"'></div>");
  var cdiv=document.getElementById(params.id.replace(/[\r\n\t ]+/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;

  function init(){
    if(params.direction=="left" || params.direction=="right"){
      direction=params.direction;
      dimension="width";
      }
    else if(params.direction=="top" || params.direction=="bottom"){
      direction=params.direction;
      dimension="height";
      }
    else {
      direction="left";
      dimension="width";
      }      
    cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px';
    var img=new Image();
    img.style.position='absolute';
    img.style[direction]='10000px';
    img.style.width=params.width-2*params.image_border_width+'px';
    img.style.height=params.height-2*params.image_border_width+'px';
    img.style.border=(params.image_border_width||0)+'px solid '+params.image_border_color;
  
    for(var i=0;i<params.images.length;i++){
      images[i]=img.cloneNode(true);
      images[i].src=params.images[i];
      if(params.links&&params.links[i]&&params.links[i]!=''){
        images[i].onclick=new Function("window.location='"+params.links[i]+"'");
        images[i].style.cursor=document.all?'hand':'pointer';
        }
      if(params.titles&&params.titles[i]&&params.titles[i]!='')
        images[i].title=params.titles[i];
      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':'10000px';
      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]='20000px';
    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()',200);
  }
</script>
</head>
<body>
<div id=right_bar style='width:90px;float:right;'>
<h4>Vertical!</h4>More steps (affects speed slightly)
<script type='text/javascript'>
carousel({id:'carousel_0',
          border:'',
          size_mode:'image',
          width:75,
          height:75,
          sides:18,
          steps:8,
          speed:7,
          direction:'top',
          images:['http://www.codingforums.com/images/icons/icon7.gif',
                  'http://www.codingforums.com/images/icons/icon8.gif',
                  'http://www.codingforums.com/images/icons/icon3.gif',
                  'http://www.codingforums.com/images/icons/icon4.gif',
                  'http://www.codingforums.com/images/icons/icon5.gif',
                  'http://www.codingforums.com/images/icons/icon9.gif',
                  'http://www.codingforums.com/images/icons/icon10.gif',
                  'http://www.codingforums.com/images/icons/icon13.gif',
                  'http://www.codingforums.com/images/icons/icon12.gif',
                  'http://www.codingforums.com/images/icons/icon11.gif',
                  'http://www.codingforums.com/images/icons/icon2.gif',
                  'http://www.codingforums.com/images/icons/icon6.gif'],
          links: [],
          titles:[],
          image_border_width:2,
          image_border_color:'black'
          });
</script></div>
<div id=right_pub style='width:90px;float:right;'>
<h4>Vertical!</h4>Less steps (affects speed slightly)
<script type='text/javascript'>
carousel({id:'carousel_5',    
          border:'',
          size_mode:'carousel',
          width:75,
          height:430,
          sides:18,
          steps:4,
          speed:7,
          direction:'bottom',
          images:['http://www.codingforums.com/images/icons/icon7.gif',
                  'http://www.codingforums.com/images/icons/icon8.gif',
                  'http://www.codingforums.com/images/icons/icon3.gif',
                  'http://www.codingforums.com/images/icons/icon4.gif',
                  'http://www.codingforums.com/images/icons/icon5.gif',
                  'http://www.codingforums.com/images/icons/icon9.gif',
                  'http://www.codingforums.com/images/icons/icon10.gif',
                  'http://www.codingforums.com/images/icons/icon13.gif',
                  'http://www.codingforums.com/images/icons/icon12.gif',
                  'http://www.codingforums.com/images/icons/icon11.gif',
                  'http://www.codingforums.com/images/icons/icon2.gif',
                  'http://www.codingforums.com/images/icons/icon6.gif'],
          links: [],
          titles:[],
          image_border_width:2,
          image_border_color:'black'
          });
</script></div><div id='header' style='height:175;padding:10px;background-color:#eee;width:570px'><div style='float:left'>
<script type='text/javascript'>
carousel({id:null, 
          border:'',
          size_mode:'image',
          width:{},
          height:'big',
          sides:'several',
          steps:8/0,
          speed:'really fast',
          direction:'whatever',
          images:['http://www.codingforums.com/images/icons/icon7.gif',
                  'http://www.codingforums.com/images/icons/icon8.gif',
                  'http://www.codingforums.com/images/icons/icon9.gif',
                  'http://www.codingforums.com/images/icons/icon10.gif',
                  'http://www.codingforums.com/images/icons/icon2.gif',
                  'http://www.codingforums.com/images/icons/icon3.gif',
                  'http://www.codingforums.com/images/icons/icon4.gif',
                  'http://www.codingforums.com/images/icons/icon5.gif',
                  'http://www.codingforums.com/images/icons/icon6.gif'],
          links: ['http://www.google.com/search?q=happy',
                  'http://www.google.com/search?q=angry',
                  'http://www.google.com/search?q=sad',
                  'http://www.google.com/search?q=big+grin',
                  'http://www.google.com/search?q=look+here',
                  'http://www.google.com/search?q=bright+idea',
                  'http://www.google.com/search?q=caution',
                  'http://www.google.com/search?q=question',
                  'http://www.google.com/search?q=cool'],
          titles:['Happy',
                  'Angry',
                  'Sad',
                  'Big Grin',
                  'Look Here',
                  'Bright Idea',
                  'Caution',
                  'Question',
                  'Cool!'],
          image_border_width:1,
          image_border_color:'red'
          });
</script></div><div style='float:left'>
<script type='text/javascript'>
carousel({id:'carousel_2',
          border:'',
          size_mode:'carousel',
          width:144,
          height:100,
          sides:4,
          steps:20,
          speed:8,
          direction:'right',
          images:['http://www.codingforums.com/images/icons/icon7.gif',
                  'http://www.codingforums.com/images/icons/icon8.gif',
                  'http://www.codingforums.com/images/icons/icon9.gif',
                  'http://www.codingforums.com/images/icons/icon10.gif',
                  'http://www.codingforums.com/images/icons/icon2.gif',
                  'http://www.codingforums.com/images/icons/icon3.gif',
                  'http://www.codingforums.com/images/icons/icon4.gif',
                  'http://www.codingforums.com/images/icons/icon5.gif',
                  'http://www.codingforums.com/images/icons/icon6.gif'],
          links: ['http://www.google.com/search?q=happy',
                  'http://www.google.com/search?q=angry',
                  'http://www.google.com/search?q=sad',
                  'http://www.google.com/search?q=big+grin',
                  'http://www.google.com/search?q=look+here',
                  'http://www.google.com/search?q=bright+idea',
                  'http://www.google.com/search?q=caution',
                  'http://www.google.com/search?q=question',
                  'http://www.google.com/search?q=cool'],
          titles:['Happy',
                  'Angry',
                  'Sad',
                  'Big Grin',
                  'Look Here',
                  'Bright Idea',
                  'Caution',
                  'Question',
                  'Cool!'],
          image_border_width:1,
          image_border_color:'red'
          });
</script></div><h1 style='float:right;'>Oooo, spinning!</h1><div style='clear:left'>
<script type='text/javascript'>
carousel({id:'carousel_7',
          border:'',
          size_mode:'carousel',
          width:287,
          height:35,
          sides:24,
          steps:5,
          speed:11,
          direction:'right',
          images:['http://www.codingforums.com/images/icons/icon7.gif',
                  'http://www.codingforums.com/images/icons/icon8.gif',
                  'http://www.codingforums.com/images/icons/icon3.gif',
                  'http://www.codingforums.com/images/icons/icon4.gif',
                  'http://www.codingforums.com/images/icons/icon5.gif',
                  'http://www.codingforums.com/images/icons/icon9.gif',
                  'http://www.codingforums.com/images/icons/icon10.gif',
                  'http://www.codingforums.com/images/icons/icon13.gif',
                  'http://www.codingforums.com/images/icons/icon12.gif',
                  'http://www.codingforums.com/images/icons/icon11.gif',
                  'http://www.codingforums.com/images/icons/icon2.gif',
                  'http://www.codingforums.com/images/icons/icon6.gif'],
          links: ['http://www.codingforums.com/',
                  'http://www.codingforums.com/',
                  'http://www.codingforums.com/',
                  'http://www.codingforums.com/'],
          titles:[],
          image_border_width:1,
          image_border_color:'blue'
          });
</script></div>
</div>
<script type='text/javascript'>
carousel({id:'Photos Courtesy of Dynamic Drive',
          border:'',
          size_mode:'image',
          width:138,
          height:225,
          sides:6,
          steps:23,
          speed:5,
          direction:'left',
          images:['http://www.dynamicdrive.com/dynamicindex14/photo1.jpg',
                  'http://www.dynamicdrive.com/dynamicindex14/photo2.jpg',
                  'http://www.dynamicdrive.com/dynamicindex14/photo3.jpg',
                  'http://www.dynamicdrive.com/dynamicindex14/photo4.jpg'],
          links: ['http://www.dynamicdrive.com/dynamicindex14/photo1.jpg',
                  'http://www.dynamicdrive.com/dynamicindex14/photo2.jpg',
                  'http://www.dynamicdrive.com/dynamicindex14/photo3.jpg',
                  'http://www.dynamicdrive.com/dynamicindex14/photo4.jpg'],
          titles:[],
          image_border_width:0,
          image_border_color:'blue'
          });
</script>
</body>
</html>