连续环绕滚动的图片特效

稿源：互联网 2022-04-19 08:00:23 点击： 1506 撤稿纠错

连续环绕滚动的图片特效，水平和垂直方向，旧图片被删除了。换张新的再运行代码看效果。

以下讨论的是和方向特效滚动相关的连续环绕滚动的图片特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<head>
<title>连续环绕滚动图片</title>
<script type='text/javascript'>

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

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>
<h3>水平方向滚动</h3>
<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:['http://www.alixixi.com/images/face/image21.gif',
                  'http://www.alixixi.com/images/face/image21.gif',
                  'http://www.alixixi.com/images/face/image21.gif',
									'http://www.alixixi.com/images/face/image21.gif'],
          links: ['http://www.alixixi.com/',
									'http://www.alixixi.com/',
									'http://www.alixixi.com/',
									'http://www.alixixi.com/'],
          titles:['javascript特效',
									'网络学院',
									'网站联盟',
									'插件下载'],
          image_border_width:1,
          image_border_color:'blue'
          });
</script>

<h3>竖直方向滚动</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:['http://www.alixixi.com/images/face/image21.gif',
                  'http://www.alixixi.com/images/face/image21.gif',
                  'http://www.alixixi.com/images/face/image21.gif',
									'http://www.alixixi.com/images/face/image21.gif'],
          links: [],
          titles:[],
          image_border_width:1,
          image_border_color:'black'
          });
</script>
</body>
<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>

关于连续环绕滚动的图片特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/20080714807.shtml方便下次再访问哦。

·上一篇： 漂动的图片
·下一篇： 图片的马赛克效果显示

连续环绕滚动的图片特效

文章分类LIST >>返回首页

最新游戏

最新新闻