javascript - 如何将下一个和上一个按钮添加到图片库

Question

我知道有人问了这个问题，我在这里搜索了又搜索，但是 a) 我似乎无法弄清楚如何调整我发现的内容，并且 b) 我还有另一个小问题需要解决尝试将下一个和上一个按钮添加到我的画廊式布局中。

这是我页面的链接:

http://mymediaculture.com/_broadway_branding/index2.html

第二个问题是我正在为我的图像使用纯 css 淡入/淡出过渡效果，但我找不到在页面加载时显示画廊的第一张图像的方法。

如您所见，我已经有了下一个/上一个链接。只是对 js/jquery 了解不够，无法使它们正常工作。

任何帮助将不胜感激

Answer 1

html

 <div id="top_mid_mid">
    <a rel="nofollow" target="_blank" href="#">
        <img id="mypicture" border="0" alt="portfolio" src="images/recent/recent1.jpg" />
    </a>
    <div id="prev"><a class="current" href="#"  title="portfolio"><img  alt="prev" src="images/prev.gif" id="prevlink" /></a></div>
        <div id="next"><a class="current" href="#"   title="portfolio"><img  alt="next" src="images/next.gif" id="nextlink" /></a></div>

</div>

JavaScript

window.onload= recent_pic;
window.onload= toogle;

var mypix=new Array("images/recent/recent1.jpg","images/recent/recent2.jpg","images/recent/recent3.jpg","images/recent/recent4.jpg","images/recent/recent5.jpg");

var thispic = 0;

function recent_pic(){
    document.getElementById("prevlink").onclick=processprev;
    document.getElementById("nextlink").onclick=processnext;

        document.getElementById(1).onclick =  one;
        document.getElementById(2).onclick =  tow;
        document.getElementById(3).onclick =  three;
        document.getElementById(4).onclick =  four;
        document.getElementById(5).onclick =  five;

}

/******************for arrow ****************/
function processprev(){
    if(thispic==0){
        thispic=mypix.length;
    }
    thispic--;
    document.getElementById("mypicture").src= mypix[thispic];
    return false;
}

function processnext(){
    thispic++;
    if(thispic==mypix.length){
        thispic=0;
    }
    document.getElementById("mypicture").src= mypix[thispic];
    return false;
}

/******************for arrow end****************/