Javascript 在产品页面上预设下一个和上一个图像按钮

我想在产品页面上的产品图片中添加“下一个”和“上一个”按钮，这样用户就可以使用这些按钮浏览所有图片，就像打开fancybox的图片一样

如何在javascript中获取下一个和上一个图像？我相信这很简单，因为所有的产品图片必须被调用和安排，因为我们已经在产品页面上了，我只是不知道如何获得它们

我在想这样的事情：

function nextImage(){
    document.getElementById('bigpic').src = next image (id?)
}

---

谢谢

使用hooked with foreach循环可以很好地完成

下面是要插入到product.tpl文件中的代码

 {if isset($images) && count($images) > 0}
        <div class="col-md-12">
            <div id="prod" class="owl-carousel owl-theme">
                {if isset($images)}
                    {foreach from=$images item=image name=thumbnails}
                        <div class="item">
                            {assign var=imageIds value="`$product->id`-`$image.id_image`"}
                            {if !empty($image.legend)}
                                {assign var=imageTitlte value=$image.legend|escape:'htmlall':'UTF-8'}
                            {else}
                                {assign var=imageTitlte value=$product->name|escape:'htmlall':'UTF-8'}
                            {/if}
                                <div id="thumbnail_{$image.id_image}">
                                    <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html'}" rel="other-views" class="thickbox{if $smarty.foreach.thumbnails.first} shown{/if}" title="{$imageTitlte}">
                                        <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html'}" alt="{$imageTitlte}" title="{$imageTitlte}" />
                                    </a>
                                </div>
                        </div>
                    {/foreach}
                {/if}
            </div>
        </div>
    {/if} 

别忘了插入owl.caroulsel.js和owl.carousel.css文件

主要优势 1.反应敏捷的 2.触摸屏在手机上滑动 3.图像仍然可以放大

 $(document).ready(function(){$("#prod").owlCarousel({loop:true,nav:false,autoplay:false,responsive:{0:{items:1,loop:true,nav:false},600:{items:1,loop:true,nav:false},1000:{items:1,nav:true,loop:true}}});});