193、旋转灯笼式图片展示

193、旋转灯笼式图片展示

1

把如下代码复制到<head></head>之间

 

 

<script type='text/javascript'>

//more javascript from http://www.smallrain.net

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>

 

 

2把如下代码复制到<body></body>之间

 

<h3><font color="#FFFFFF">水平方向滚动</font></h3>

<font color="#FFFFFF">

<script type='text/javascript'>

carousel({id:'Amazon Books', //Enter arbitrary but unique ID of this slideshow instance

          border:'',

          size_mode:'image', //Enter "carousel" or "image". Affects the width and height parameters below.

          width:107, //Enter width of image or entire carousel, depending on above value

          height:140, //Enter height of image or entire carousel, depending on above value

          sides:6, //# of sides of the carousel. What's shown = sides/2. Even integer with sides/2< total images is best

          steps:23, //# of animation steps. More = smoother, but more CPU intensive

          speed:5, //Speed of slideshow. Larger = faster.

          direction:'left', //Direction of slideshow. Enter "top", "bottom", "left", or "right"

          images:['photo1.jpg',

                  'photo2.jpg',

                  'photo3.jpg',

                                                               'photo4.jpg'],

          links: ['http://www.7stk.com/',

                                                               'http://www.7stk.com/',

                                                               'http://www.7stk.com//background/index.htm',

                                                               'http://www.7stk.com//navigation/index.htm'],

          titles:['javascript特效',

                                                               '网页特效集锦',

                                                               '背景特效',

                                                               '导航特效'],

          image_border_width:1,

          image_border_color:'blue'

          });

</script>

 

 

</font>

 

 

<h3><font color="#FFFFFF">竖直方向滚动</font></h3>

<script type='text/javascript'>

carousel({id:'carousel_1', //Enter arbitrary but unique ID of this slideshow instance

          border:'',

          size_mode:'image', //Enter "carousel" or "image". Affects the width and height parameters below.

          width:107, //Enter width of image or entire carousel, depending on above value

          height:140, //Enter height of image or entire carousel, depending on above value

          sides:8, //# of sides of the carousel. What's shown = sides/2. Even integer with sides/2< total images is best

          steps:8, //# of animation steps. More = smoother, but more CPU intensive

          speed:7, //Speed of slideshow. Larger = faster.

          direction:'top', //Direction of slideshow. Enter "top", "bottom", "left", or "right"

          images:['photo1.jpg',

                  'photo2.jpg',

                  'photo3.jpg',

                                                               'photo4.jpg'],

          links: [],

          titles:[],

          image_border_width:1,

          image_border_color:'black'

          });

</script>

 

Write a comment

Comments: 0