JS如何实现图片滑动？

JavaScript018

JS如何实现图片滑动？,第1张

<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>

横排要滑动的图片，然后设置一张图片的宽度；其他地方隐藏掉。用js/jq控制每次滑动的宽度为一张图片的宽度。到最后一张的时候，滑动位置变为初始位置就可以了。反方向也是如此，滑动就完成了。