炫！旋转灯笼式图片展示_网页图片特效

·网页特效库 ·网页工具库

背景按钮

导航特效

< 后退 | 收藏网页特效库

推荐网页特效

推荐网页工具

您的位置：网页特效库 >> 网页图片特效 >> 炫！旋转灯笼式图片展示	查看此特效演示

炫！旋转灯笼式图片展示

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

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>

把如下代码复制到<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.butong.net',
									'http://www.butong.net',
									'http://www.butong.net/background/index.htm',
									'http://www.butong.net/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>

使用说明：调用的图片和图片链接大家可以自行在<body></body>代码部分进行更改。

上一个特效：水中倒影

返回列表

下一个特效：眩!亮暗变化的图片