用JS 怎么实现点击上一张图片，下一张图片的显示？

JavaScript022

用JS 怎么实现点击上一张图片，下一张图片的显示？,第1张

要么用ajax，要么把图片都绑出来，设为隐藏，然后js控制第几张图片显示，要么把图片都绑出来做个div遮罩层。建议1、找个实例，右键--查看源码拿下别人的js2、换个方式，上百度搜索thickbox实例个人觉得thickbox效果还不错。

jquery的，js有三段，下面缺一不可

<script type="text/javascript" src="http://www.centerm.com.cn/s1/scripts/core.js"></script>

<script type="text/javascript" src="http://www.centerm.com.cn/s1/scripts/mover.js"></script>

<SCRIPT>

var slideshow_index = 1

var use_timer = true

window.addEvent("load", function() {

new Bang_Mover("mover1", "mover1left", "mover1right", { "ul_tag": "ul", "duration": 1000 })

new Bang_Mover("mover2", "mover2left", "mover2right", { "ul_tag": "ul", "duration": 1000 })

new Bang_Mover("mover3", "mover3left", "mover3right", { "ul_tag": "ul", "duration": 1000 })

setTimeout("slideshow_run()", 3000)

})

function slideshow_run() {

var slideshow_obj = $("slideshow")

var pic_ul = slideshow_obj.getChildren("ul")[0]

var pic_lis = pic_ul.getChildren("li")

var bn_span = slideshow_obj.getChildren("span")[0]

var bn_is = bn_span.getChildren("i")

var ef1 = new Fx.Morph(pic_lis[slideshow_index], { duration: 'long', transition: Fx.Transitions.Sine.easeOut })

pic_lis.each(function(item2, index2) {

item2.set("styles", { "z-index": "100", "opacity": "0.1" })

bn_is[index2].removeClass("on")

})

bn_is[slideshow_index].addClass("on")

pic_lis[slideshow_index].set("styles", { "z-index": "2000", "opacity": 1, "display": "" })

ef1.start({

'opacity': [0.1, 1]

})

slideshow_index++

if (slideshow_index >= pic_lis.length) {

slideshow_index = 0

}

if (use_timer) {

setTimeout("slideshow_run()", 3000)

} else {

use_timer = true

}

}

function Dron_ScrollBox(uid) {

this.scrollBox = document.getElementById(uid)

this.scrollBoxHeight = this.scrollBox.clientHeight

this.scrollBoxInner = this.scrollBox.innerHTML

this.scrollCol = this.scrolln = 0

this.setScroll = function() {

this.scrollBox.scrollTop = this.scrollCol + this.scrolln

if (this.scrolln == this.scrollBoxHeight)

return this.addScroll()

else

this.scrolln++

var o = this

function m() {

o.setScroll()

}

setTimeout(m, 10)

}

this.addScroll = function() {

this.scrollBox.innerHTML += "" + this.scrollBoxInner

this.scrollCol = this.scrollBox.scrollTop

this.scrolln = 0

var o = this

function m() {

o.setScroll()

}

setTimeout(m, 3000)

}

this.init = this.addScroll

}

new Dron_ScrollBox("scrollBox").init()

function click_it(num) {

use_timer = false

slideshow_index = num

slideshow_run()

}

</SCRIPT>

body内容为以下一段：

<DIV class=product_pic id=SY_Hot1>

<H2>热点推荐--瘦客户机</H2><I class=go_r id=mover1left>right</I><I class=go_l

id=mover1right>left</I>

<DIV class=pic_roll id=mover1 style="POSITION: relative">

<UL

style="DISPLAY: inlineLEFT: 0pxFLOAT: leftPOSITION: absoluteTOP: 0px">

<LI><A

href="http://www.centerm.com.cn/Product/ProductDetail.aspx?ItemID=88"><IMG

src="升腾资讯官方网站.files/201104221618329531.jpg"><SPAN>B2820</SPAN></A></LI>

<LI><A

href="http://www.centerm.com.cn/Solution/SolutionDetail.aspx?ItemID=110"><IMG

src="升腾资讯官方网站.files/201104221636582812.jpg"><SPAN>商业银行OA办公方案</SPAN>

</A></LI></UL></DIV></DIV>

这个还是比较繁冗的，

下面这个效果差不多，属于精简了，你可以下载参考下

http://www.gotoseo.net/rar/Gotoseo_js(5).rar