JS幻灯片，请看代码！

JavaScript030

JS幻灯片，请看代码！,第1张

slideList = ['./images/slide/zc/m1.jpg']这是一个数组的写法，

slideList = ['./images/slide/zc/m1.jpg'，'./images/slide/zc/m1.jpg'，'./images/slide/zc/m1.jpg']

多张就加多个路径，中间用逗号隔开

在页面中应该有一个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输出.一点好处没有,改的时候也麻烦.懒的调输出了,你自己改吧.

<script>

var widths=646//设置幻灯片宽度

var heights=416//设置幻灯片高度

var counts=5//设置幻灯片数量

//设置图片路径

img1=new Image ()img1.src='images/home1.jpg'

img2=new Image ()img2.src='images/home2.jpg'

img3=new Image ()img3.src='images/home3.jpg'

img4=new Image ()img4.src='images/home4.jpg'

img5=new Image ()img5.src='images/home5.jpg'

//设置图片的URL

url1=new Image ()url1.src='#'

url2=new Image ()url2.src='#'

url3=new Image ()url3.src='#'

url4=new Image ()url4.src='#'

url5=new Image ()url5.src='#'

var txt=new Array()

txt[0]="111111"

txt[1]="111111"

txt[2]="111111"

txt[3]="111111"

txt[4]="111111"

var nn=1

var key=0

function change_img()

{

if(key==0){key=1}

else if(document.all)

{

document.getElementById("pic").filters[0].Apply()

document.getElementById("pic").filters[0].Play(duration=2)

}

eval('document.getElementById("pic").src=img'+nn+'.src')

eval('document.getElementById("url").href=url'+nn+'.src')

eval('document.getElementById("txt").innerHTML=txt['+nn+']')

for (var i=1i<=countsi++)

{document.getElementById("xxjdjj"+i).className='axx'}

document.getElementById("xxjdjj"+nn).className='bxx'

nn++

if(nn>counts){nn=1}

//设置图片切换间隔时间

tt=setTimeout('change_img()',5000)

}

function changeimg(n)

{nn=nwindow.clearInterval(tt)change_img()}

document.write('<style>')

document.write('.axx{padding:1px 10pxborder-left:#cccccc 1px solid}')

document.write('a.axx:link,a.axx:visited{text-decoration:nonecolor:#fffline-height:26pxfont:24px sans-serifbackground-color:#666}')

document.write('a.axx:active,a.axx:hover{text-decoration:nonecolor:#fffline-height:26pxfont:24px sans-serifbackground-color:#999}')

document.write('.bxx{padding:1px 7pxborder-left:#cccccc 1px solid}')

document.write('a.bxx:link,a.bxx:visited{text-decoration:nonecolor:#fffline-height:26pxfont:24px sans-serifbackground-color:#D34600}')

document.write('a.bxx:active,a.bxx:hover{text-decoration:nonecolor:#fffline-height:26pxfont:24px sans-serifbackground-color:#D34600}')

document.write('</style>')

document.write('<div style="width:'+widths+'pxheight:'+heights+'pxoverflow:hiddentext-overflow:clip">')

document.write('<div><a id="url"><img id="pic" style="border:0pxfilter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>')

document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=80)background: #888888width:100%-2pxtext-align:righttop:-26pxposition:relativemargin:1pxheight:26pxpadding:0pxmargin:0pxborder:0px">')

<table>

<tr>

<td id=txt><td>

<td>

for(var i=1i<counts+1i++)

{

document.write('<a href="javascript:changeimg('+i+')" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>')

}

</td>

</tr>

</table>

document.write('</div></div>')

change_img()

</script>