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

JavaScript014

js循环滚动频道幻灯片代码怎么写,第1张

在页面中应该有一个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>

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

// 数字2000可以控制滚动的间隔，2000为2秒，3000为3秒

window.setTimeout( "run()", 2000 )

// 数字50可以控制速度，该数字越大速度越慢

window.setTimeout( "run()", 50 )

// 已经实现无限循环滚动

oMarquee.innerHTML += oMarquee.innerHTML

经典的无缝滚动代码! <div id=demo style="overflow:hiddenwidth:750" align=center>

<table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >

<tr><td valign=top bgcolor=ffffff id=marquePic1>

<table width='100%' border='0' cellspacing='0'><tr><td align=center><a href='#'><img src=" http://www.baidu.com/img/logo.gif" width=120 height=80 border=0><br><br>01</a></td><td align=center><a href='#'><img src= http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>02</a></td><td align=center><a href='#'><img src= http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>03</a></td><td align=center><a href='#'><img src=" http://www.baidu.com/img/logo.gif" width=120 height=80 border=0><br><br>04</a></td><td align=center><a href='#'><img src= http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>05</a></td><td align=center><a href='#'><img src= http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>06</a></td><td align=center><a href='#'><img src=" http://www.baidu.com/img/logo.gif" width=120 height=80 border=0><br><br>07</a></td><td align=center><a href='#'><img src= http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>08</a></td><td align=center><a href='#'><img src= http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>09</a></td></tr></table>

</td><td id=marquePic2 valign=top></td></tr>

</table></div>

<script type="text/javascript">

var speed=50

marquePic2.innerHTML=marquePic1.innerHTML

function Marquee(){

if(demo.scrollLeft>=marquePic1.scrollWidth){

demo.scrollLeft=0

}else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>