js幻灯片实现方法（js循环滚动频道幻灯片代码怎么写）

本文目录

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

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 [num]);

4.判断影藏框的值是否大于数组的长度,改变影藏框的值
if(num》=imgArray.length-1){
document.getElementById(’hiddenImg’)=0;
}else{
document.getElementById(’hiddenImg’)=num+1;
}
}
《script》

大致思想是这样，参考下，代码是手打的，可能有错！！没测试！

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》

求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幻灯片居中动起来

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

垂直居中 valign=’middle’

谁能告诉我图片幻灯片的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[i].className=“b1“};button.childNodes[n].className=“b2“;}
title.className=“num_list“;title.appendChild(span);alpha(title,opac1);id.className=“d1“;div.className=“d2“;id.appendChild(div);id.appendChild(title);id.appendChild(button);
//渐显
var fadeon=function(){opac+=5;div.innerHTML=li[j].innerHTML;span.innerHTML=getTag(“img“,li[j]).alt;alpha(div,opac);if(scton==0){sc(j);num=-2;scrolltxt();scton=1};if(opac《100){timer=setTimeout(fadeon,interv2)}else{timer2=setTimeout(fadeout,interv);};}
//渐隐
var fadeout=function(){opac-=5;div.innerHTML=li[j].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》