js幻灯片实现方法（求FLASH和JS实现幻灯片特效制作方法）

本文目录

• 求FLASH和JS实现幻灯片特效制作方法
• 谁能告诉我图片幻灯片的JS怎么写
• JS写幻灯片特效
• js幻灯片是怎么实现
• js循环滚动频道幻灯片代码怎么写
• 如何让网页JS幻灯片居中动起来

求FLASH和JS实现幻灯片特效制作方法

　　《a target=_self href=“javascript:goUrl()“》　　《span class=“f14b“》　　《script type=“text/javascript“》　　imgUrl1=“http://www.webjx.com/img/200406301.jpg“;　　imgtext1=“网页教学网制作素材“　　imgLink1=escape(“http://www.webjx.com/htmldata/sort/8.html“);　　imgUrl2=“http://www.webjx.com/img/200406302.jpg“;　　imgtext2=“网页教学网网页制作专区“　　imgLink2=escape(“http://www.webjx.com/htmldata/sort/3.html“);　　imgUrl3=“http://www.webjx.com/img/200406303.jpg“;　　imgtext3=“网页教学网网页特效专区“　　imgLink3=escape(“http://www.webjx.com/htmldata/sort/5.html“);　　imgUrl4=“http://www.webjx.com/img/200406304.jpg“;　　imgtext4=“网页教学网视频教程“　　imgLink4=escape(“http://www.webjx.com/htmldata/sort/15.html“);　　imgUrl5=“http://www.webjx.com/img/200406305.jpg“;　　imgtext5=“网页教学网网页制作书籍“　　imgLink5=escape(“http://www.webjx.com/htmldata/sort/7.html“);　　var focus_width=280　　var focus_height=158　　var text_height=18　　var swf_height = focus_height+text_height　　var pics=imgUrl1+“|“+imgUrl2+“|“+imgUrl3+“|“+imgUrl4+“|“+imgUrl5　　var links=imgLink1+“|“+imgLink2+“|“+imgLink3+“|“+imgLink4+“|“+imgLink5　　var texts=imgtext1+“|“+imgtext2+“|“+imgtext3+“|“+imgtext4+“|“+imgtext5　　document.write(’《object classid=“clsid:d27cdb6e-ae6d-11cf-96b8-444553540000“ codebase=“http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0“ width=“’+ focus_width +’“ height=“’+ swf_height +’“》’);　　document.write(’《param name=“allowScriptAccess“ value=“sameDomain“》《param name=“movie“ value=“http://www.webjx.com/js/focus.swf“》《param name=“quality“ value=“high“》《param name=“bgcolor“ value=“#F0F0F0“》’);　　document.write(’《param name=“menu“ value=“false“》《param name=wmode value=“opaque“》’);　　document.write(’《param name=“FlashVars“ value=“pics=’+pics+’&links=’+links+’&texts=’+texts+’&borderwidth=’+focus_width+’&borderheight=’+focus_height+’&textheight=’+text_height+’“》’);　　document.write(’《embed src=“pixviewer.swf“ wmode=“opaque“ FlashVars=“pics=’+pics+’&links=’+links+’&texts=’+texts+’&borderwidth=’+focus_width+’&borderheight=’+focus_height+’&textheight=’+text_height+’“ menu=“false“ bgcolor=“#F0F0F0“ quality=“high“ width=“’+ focus_width +’“ height=“’+ focus_height +’“ allowScriptAccess=“sameDomain“ type=“application/x-shockwave-flash“ pluginspage=“http://www.macromedia.com/go/getflashplayer“ /》’); document.write(’《/object》’);　　《/script》　　《/span》《/a》《span id=focustext class=f14b》 《/span》

谁能告诉我图片幻灯片的JS怎么写

《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》《html xmlns=“http://www.w3.org/1999/xhtml“》《head》《meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ /》《title》Javascript图片幻灯效果《/title》《style type=“text/css“ media=“all“》.d1{width:443px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;}.loading{width:443px;border:#666666 2px solid;background-color:#000000;color:#FFCC00;font-size:12px;height:179px;text-align:center;padding-top:30px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;}.d2{width:100%;height:209px;overflow:hidden;}.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px 0px;height:20px;overflow:hidden;}.num_list span{display:inline-block;height:16px;padding-left:6px;}img{border:0px;}ul{display:none;}.button{position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}.b1,.b2{background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;}.b2{color:#FFCC33;background-color:#FF6633;}《/style》《script language=“javascript“ type=“text/javascript“》//主函数var s=function(){var interv=2000; //切换时间var interv2=10; //切换速速var opac1=80; //文字背景的透明度var source=“fade_focus“ //图片容器的id名称//获取对象function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}}function getid(id){return document.getElementById(id)};var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag(“div“,id));var li=getTag(“li“,id);var div=document.createElement(“div“);var title=document.createElement(“div“);var span=document.createElement(“span“);var button=document.createElement(“div“);button.className=“button“;for(var i=0;i《li.length;i++){var a=document.createElement(“a“);a.innerHTML=i+1;a.onclick=function(){clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();};a.className=“b1“;a.onmouseover=function(){this.className=“b2“};a.onmouseout=function(){this.className=“b1“;sc(j)};button.appendChild(a);}//控制图层透明度function alpha(obj,n){if(document.all){obj.style.filter=“alpha(opacity=“+n+“)“;}else{obj.style.opacity=(n/100);}}//控制焦点按钮function sc(n){for(var i=0;i《li.length;i++){button.childNodes.innerHTML;alpha(div,opac);if(scton==0){num=2;scrolltxt();scton=1};if(opac》0){timer=setTimeout(fadeout,interv2)}else{if(j《li.length-1){j++}else{j=0};fadeon()};}//滚动文字var scrolltxt=function(){t+=num;span.style.marginTop=t+“px“;if(num《0&&t》3){timer3=setTimeout(scrolltxt,interv2)}else if(num》0&&t《62){timer3=setTimeout(scrolltxt,interv2)}else{scton=0}};fadeon();}//初始化window.onload=s;《/script》《/head》《body》《div id=“fade_focus“》 《div class=“loading“》Loading...《br /》《img src=“/jscss/demoimg/200905/logings.gif“ width=“100“ height=“100“ /》《/div》 《ul》 《li》《img src=“/jscss/demoimg/wall1.jpg“ width=“443“ height=“209“ alt=“展示图片1“ /》《/li》 《li》《img src=“/jscss/demoimg/wall2.jpg“ width=“443“ height=“209“ alt=“展示图片2“ /》《/li》 《li》《img src=“/jscss/demoimg/wall3.jpg“ width=“443“ height=“209“ alt=“展示图片3“ /》《/li》 《/ul》《/div》《/body》《/html》

JS写幻灯片特效

新建一个文件夹dome, 

在文件下新建一个文件夹img 放入5张名称为1,2,3,4,5 格式为“.jpg”的图片文件。

在新建一个dome.html 文件 内容如下：

《html》

《head》

《meta charset=“UTF-8“/》

《title》《/title》

《style type=“text/css“》

*{margin: 0;padding: 0;}

#a1{

width: 600px;

height: 500px;

border: 10px silver solid;

animation:backgroundImg 5s infinite ;

-webkit-animation:backgroundImg 5s  infinite;

}

@keyframes backgroundImg{

0%{background-color: #0000FF;}

25%{background-color: #0099FF;}

50%{background-color: #00FFFF;}

75%{background-color: #99FFFF;}

100%{background-color: #FFFFFF;}

}

@-webkit-keyframes backgroundImg{

0%{background-color: #0000FF;}

25%{background-color: #0099FF;}

50%{background-color: #00FFFF;}

75%{background-color: #99FFFF;}

100%{background-color: #FFFF00;}

}

#backImg{

width: 500px;

height: 490px;

/*border: 5px red solid;*/

margin-left:45px ;

z-index: 100;

background-size:100% 100%;

}

a:hover{

background-color:#0000FF;

border: 5px springgreen solid;

width: 20px;

}

a{

display: block;

z-index: ;

width: 30px;

height: 30px;

text-align: center;

line-height: 30px;

color: beige;

font-weight: 300;

border-radius:50% ;

font-size: 2em;

background-color:#0099FF;

position: absolute;

top: 255px;

box-shadow: none;

}

#right{

left:580px;

}

span{

display: block;

width: 50px;

height: 10px;

background-color: #99FFFF;

float: right;

margin-left: 20px;

position: relative;

bottom: 50px;

right: 100px;

}

#show{

width: 200px; 

height: 100px; 

border: 1px red solid;

position: absolute;

bottom: 230px;

right: 150px;

background-size:100% 100% ;

}

《/style》

《/head》

《body》

《div id=“a1“》

《a id=“left“》《《/a》

《a id=“right“》》《/a》

《div id=“backImg“》《/div》

《div id=“foot“》《/div》

《/div》

《script type=“text/javascript“》

var div=document.getElementById(“a1“);

var backImg=document.getElementById(“backImg“);

var a_left=document.getElementById(“left“);

var a_right=document.getElementById(“right“);

var i=0;

function backImage(){

i++;

backImg.style.backgroundImage=“url(img/“ +i+“.jpg)“;

setTimeout(backImage,7000);

if(i》=5){

i=0;

}

}

backImage();

a_left.onclick=function(){

i--;

if(i《=0||i》5){

i=5;

}

backImg.style.backgroundImage=“url(img/“ +i+“.jpg)“;

}

a_right.onclick=function(){

i++;

if(i《=0||i》5){

i=1;

}

backImg.style.backgroundImage=“url(img/“ +i+“.jpg)“;

}

for (var j = 0; j 《 3; j++) {

var span=document.createElement(“span“);

span.id=“span_“+j;

div.appendChild(span);

span.onmouseover=function(){

show(event);

}

}

function show(e) {

backImg.style.opacity=“0.5“;

var span = e.target;

var div = document.createElement(“div“);

div.id = “show“;

span.parentNode.appendChild(div);

console.log(span.id);

if(span.id==“span_2“){

i-=1;

console.log(i);

if(i《=0||i》5){

i=5;

}

div.style.backgroundImage=“url(img/“ +i+“.jpg)“;

}else if(span.id==“span_1“){

div.style.backgroundImage=“url(img/“ +i+“.jpg)“;

}else if(span.id==“span_0“){

i+=1;

if(i《=0||i》5){

i=1;

}

div.style.backgroundImage=“url(img/“ +i+“.jpg)“;

}

span.onmouseout = function() {

backImg.style.opacity=“initial“;

this.parentNode.removeChild(div);

}

span.onclick=function(){

backImg.style.backgroundImage=“url(img/“ +i+“.jpg)“;

}

}

《/script》

《/body》

《/html》

js幻灯片是怎么实现

1.图片放置：你需要把所有图片放入一个div（这里就把它的class叫做pics吧）中，再把pics放入一个更大的div（就命名为container吧）中，然后把container的宽度设为一张图片的宽度，再给它设置overflow:hidden。然后把pics的宽度设置为所有图片的总宽度。这样方便后面从左向右切换。如下图所示：

2.图片轮播。基本要领是，当点击next按钮的时候，将pics容器的left属性定义到下一张图片的位置，从而移动到下一张图片，例如，假设当前是第二张图片，那么点击按钮的时候应该把pics的left值设为-640*2 + ’px’（因为我这里用的图片都是-640px的）（当然这里还要加入一个计数器，当点到最后一张图片的时候，计数器置0）。

如果你不打算加入平滑移动的动画，那到这里就可以结束了。但是如果你打算加入动画，这里就有一个问题：当移动到最后一张图片的时候，继续点击，图片组会由最后一张长途跋涉回滚到第一张，这样用户体验很不好。理想的状态应当是，当你滚动到最后一张继续滚动的时候，应当像之前滚向下一张一样无缝滚动。不知道我说的清不清楚，大致就是：像手机屏幕一样，当你滑动到最后一屏的时候接着滑动，会直接滑回一屏，也就是循环滑动。

它的基本原理是，你要在正常的图片组的最后面加入一张缓冲图片（src和第一张图片相同），当幻灯片正处于最后一张图片的时候，点击滑动按钮，平滑滑动到这张缓冲图片，当用户下一次点击的时候，再悄悄地把图片置换回真正的第一张图片，然后再执行动画。由于置换回第一张图片的时候是立即执行的，所以用户不会发现图片已经回到了真正的第一张，这就实现了循环滑动。

js循环滚动频道幻灯片代码怎么写

在页面中应该有一个img标签《div》 《img src=’’ id=’imgs’》《/div》《button onclick=’qie()’》《/button》《input type=’hidden’ id=’hiddenImg’ 》《script》 1.在js中定义一个存储图片地址的数组 var imgArray = new Array(’地址1’,’地址2’...); 2.设置影藏框的默认值为1 document.getElementById(’hiddenImg’)=0; 3.首先写一个切换幻灯片的方法： function qie(){ var num = number(document.getElementById(’hiddenImg’).value) var img = document.getElementById(’imgs’); img.setAttribute(’src’,imgArray ); 4.判断影藏框的值是否大于数组的长度,改变影藏框的值 if(num》=imgArray.length-1){ document.getElementById(’hiddenImg’)=0; }else{ document.getElementById(’hiddenImg’)=num+1; } }《script》大致思想是这样，参考下，代码是手打的，可能有错！！没测试！

如何让网页JS幻灯片居中动起来

方法1：外层div 加上 align=“center“方法2：在《body》《center》你的内容 这些内容都会水平居中《/center》《/body》垂直居中 valign=’middle’