中文(简体)
<!-- 把以下代码放到HEAD区域内--> <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='相对'; cdiv.style.overflow='隐藏'; cdiv.title=params.id; var counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/params.speed)-5;间隔=isNaN(间隔)?200:间隔; 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), 维度, 方向;函数 init(){ if(params.direction=="左" || params.direction=="右"){ 方向=params.direction;尺寸=“宽度”; } else if(params.direction=="顶部" || params.direction=="底部"){ 方向=params.direction;尺寸=“高度”; } else { 方向=“左”;尺寸=“宽度”; cdiv.style[维度]=params[维度]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px'; var img=新图像(); img.style.position='绝对'; img.style[方向]='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 实心'+params.image_border_color; //更多来自http://www.downcodes.com的javascript for(var i=0;i<params.images.length;i++){ images[i]=img.cloneNode(true);图片[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':'指针'; if(params.titles && params.titles[i] && params.titles[i]!='') images[i].title=params.titles[i];图片[i+params.images.length]=图片[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[尺寸]*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.边):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'; } } 初始化(); cdiv.rotate = function(){ setTimeout('document.getElementById("'+cdiv.id+'").rotate()',interval); if(!spinning) 返回; if(++counter>=params.steps){ counter=0; if(++img_index>=img_index_cap) img_index=params.images.length; } images[img_index-faces].style[方向]='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(){ spin=false; } cdiv.onmouseout=function(){ spin=true; setTimeout('document.getElementById("'+cdiv.id+'").rotate()',200); } </script> </head> <!--把以下代码放到body区域内--> <body> <h3>水平方向滚动</h3> <script type='text/javascript'> carousel({ id:'Amazon Books', //输入此幻灯片实例的任意但唯一的 ID border:'', size_mode:'image', //输入“carousel”或“image” 影响下面的宽度和高度参数 width: 107, //输入图像或整个轮播的宽度,取决于上面的值 height:140, //输入图像或整个轮播的高度,取决于上面的值 Sides:6, //轮播的边数 = 显示的内容 =。边数/2。边数/2< 总图像的整数是最好的步骤:23,//动画步骤数。更多=更平滑,但更密集的速度:5,//幻灯片播放速度更大=更快。 'left', //幻灯片方向。输入“上”、“下”、“左”或“右” images:['', '', '', ''], links: ['http:// /www.downcodes.com/', 'http://www.downcodes.com/', 'http://www.downcodes.com/', 'http://www.downcodes.com/'], 标题:['javascript效果', '网络学院', '网站联盟', '插件下载'], image_border_width:1, image_border_color:'蓝色' }); </script> <h3>竖直方向滚动</h3> <script type='text/javascript'> carousel({id:'carousel_1', //输入此幻灯片实例边框的任意但唯一的 ID:'', size_mode:'image', //输入“carousel”或“image”。 width:107, //输入图像或整个carousel的宽度,取决于上面的值 height:140, //输入图像或整个轮播的高度,取决于上面的值sides:8, //显示的内容=sides/2。即使是sides/2<总图像的整数也是最好的steps:8, //# of the carousel。动画步骤。 更多 = 更流畅,但更占用 CPU 速度:7, // 幻灯片播放速度更快。 Direction:'top', // 幻灯片播放方向。或“右”图像:['', '', '', ''], 链接: [], 标题:[], image_border_width:1, image_border_color:'black' }); </脚本> </正文>