Question

请高手帮忙看一下JS代码，想实现一个简单的功能。

<div class="goods-pic-box">
<div class="goods-big-pic">
<img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" id="goodsimg"/>
</div>
<div class="picture clearfix" id="imglist">
<!-- {foreach from=$pictures item=picture}-->
<img src="{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}" alt="{$goods.goods_name}" lang="{$picture.img_url}" class="autobg" />
<!--{/foreach}-->
</div>
<span class="icon-slides icon-slides-prev" title="上一张" id="goodsPicPrev" style="height: 489px;">上一张</span>
<span class="icon-slides icon-slides-next" title="下一张" id="goodsPicNext" style="height: 489px;">下一张</span>
</div>

对应的JS如下，现在想加入点击上一张可以切换上一张图片，点击下一张可以切换下一张图片，请问增加JS代码呢？

function picturs(){
var goodsimg = document.getElementById("goodsimg");
var imglist = document.getElementById("imglist");
var imgnum = imglist.getElementsByTagName("img");
for(var i = 0; i<imgnum.length; i++){
imgnum[i].onclick=function(){
var lang = this.getAttribute("lang");
goodsimg.setAttribute("src",lang);
for(var j=0; j<imgnum.length; j++){
if(imgnum[j].getAttribute("class") =="onbg" || imgnum[j].getAttribute("className") =="onbg"){
imgnum[j].className = "autobg";
break;
}
}
this.className = "onbg";
}
}
}

Answer 1

这个我做过，只能给你个思路，就是你点下一张的时候，你应该是可以获得即将要显示的图片的名称的，然后把那个图片名称赋值给当前大图片就可以了。（如过你那个图片数据是很多，也是必须重新从数据库取的话，可以用AJAX异步，思路跟前面说的一样）。

追问

上面的div+css我已经写好了，请问可以帮我把下面的JS改一下吗？感觉到很头痛。

Answer 2

把图片并排在一大容器div内，position为绝对布局，父容器用相对限制子容器，设置left属性，点击前后改变left值，可以参考焦点图的实现方法。

追问

哥实在听不懂你说的意思，因为我那个HTML和CSS都写好了，可以帮我增加一下那个JS代码吗？

追答

　　焦点图，百度这个 或者我给你发个例子http://去掉汉字pan.baidu.com/share/link?shareid=2460924742&uk=3727281349

Answer 3

Sliderjs,方便快捷制作图片切换