怎么用JS脚本使多张图片滚动?

JavaScript06

怎么用JS脚本使多张图片滚动?,第1张

推荐使用<marquee>实现图片滚动,示例:

<marquee

scrolldelay="100"

direction="up"

onmouseover="this.stop()"

onmouseout="this.start()"><img

src="xxxxxxx"></marquee>

其中scrolldelay="100"

===>指滚动延迟时间,单位是毫秒ms,默认为90ms

direction="up"

===>指滚动方向,默认从左往右,可取的值为:up,down,left,right

onmouseover="this.stop()"

===>指鼠标悬停在图片上时,图片静止

onmouseout="this.start()"

===>指鼠标离开图片时,图片运动

希望对您有所帮助

<script language="javascript" type="text/javascript">

//图片滚动展示 Start

var counts = 4

//大图//

img1 = new Image()

img1.src = 'images/1.jpg'

img2 = new Image()

img2.src = 'images/2.jpg'

img3 = new Image()

img3.src = 'images/3.jpg'

img4 = new Image()

img4.src = 'images/4.jpg'

var smallImg = new Array()

//小图

smallImg[0] = 'images/index_adb1.gif'

smallImg[1] = 'images/index_adb2.gif'

smallImg[2] = 'images/index_adb3.gif'

smallImg[3] = 'images/index_adb4.gif'

//链接地址

url1 = new Image()

url1.src = ' http://www.baidu.com'

url2 = new Image()

url2.src = ' http://www.qzxtg.com'

url3 = new Image()

url3.src = ' http://www.soso.com'

url4=new Image()

url4.src=' http://www.sina.com.cn'

//alt值

alt1 = new Image()

alt1.alt = ''

alt2 = new Image()

alt2.alt = ''

alt3 = new Image()

alt3.alt = ' '

alt4 = new Image()

alt4.alt=''

////欢迎来到标准之路.

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("pic").alt=alt' + nn + '.alt')

if (nn == 1) {

document.getElementById("url").target = "_blank"

document.getElementById("url").style.cursor = "pointer"

} else {

document.getElementById("url").target = "_blank"

document.getElementById("url").style.cursor = "pointer"

}

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()', 7000)

}

function changeimg(n) {

nn = n

window.clearInterval(tt)

change_img()

}

function imageshow() {

document.write('<div class="picshow_main">')

document.write('<div><a id="url"><img id="pic" class="imgbig" /></a></div>')

document.write('<div class="picshow_change">')

for ( var i = 0i <countsi++) {

document.write('<a href="javascript:changeimg(' + (i + 1)

+ ')" id="xxjdjj' + (i + 1)

+ '" class="axx" target="_self"><img src="' + smallImg[i]

+ '"></a>')

}

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

change_img()

}

//图片滚动展示 End

</script>

<script language="javascript" type="text/javascript">

imageshow()

</script>