javascript - 图像的垂直面板，希望图像在最后一个之后重新启动

Question

我正忙着为一家建筑公司制作网站
我有一个 div，右边有 100% 的高度位置，这个 div 里面有图片
可以查看本站here看看我在说什么。
div 下的箭头使 div -135px 中第一个 img 的 margin-top目前是。 (使用 Javascript 完成)
我的目标是尝试让 div 中的图像永远连续，以便在最后一张图像之后再次出现第一张图像。 (显然无需一遍又一遍地复制和粘贴图像)。
div 的 HTML:

<div id="rightPanel">
    <div id="first" style="margin-top:0px;" onclick="changeF('url(images/bg1.jpg)')"><img src="images/thumb.jpg" width="170px" height="113px"></div>
    <div onclick="changeF('green')"><img width="170px" style="background:green;" height="113px"></div>
    <div onclick="changeF('yellow')"><img width="170px" style="background:yellow;" height="113px"></div>
    <div onclick="changeF('purple')"><img width="170px" style="background:purple;" height="113px"></div>
    <div onclick="changeF('red')"><img width="170px" style="background:red;" height="113px"></div>
    <div onclick="changeF('blue')"><img width="170px" style="background:blue;" height="113px"></div>
    <div onclick="changeF('aqua')"><img width="170px" style="background:aqua;" height="113px"></div>
    <div onclick="changeF('orange')"><img width="170px" style="background:orange;" height="113px"></div>
    <div onclick="changeF('yellow')"><img width="170px" style="background:yellow;" height="113px"></div>
    <div onclick="changeF('white')"><img width="170px" style="background:white;" height="113px"></div>
    <div onclick="changeF('gray')"><img width="170px" style="background:gray;" height="113px"></div>
    <div onclick="changeF('pink')"><img width="170px" style="background:pink;" height="113px"></div>
    <div onclick="changeF('yellow')"><img width="170px" style="background:yellow;" height="113px"></div>
    <div onclick="changeF('purple')"><img width="170px" style="background:purple;" height="113px"></div>
    <div onclick="changeF('red')"><img width="170px" style="background:red;" height="113px"></div>
    <div onclick="changeF('blue')"><img width="170px" style="background:blue;" height="113px"></div>
    <div onclick="changeF('aqua')"><img width="170px" style="background:aqua;" height="113px"></div>
    <div onclick="changeF('orange')"><img width="170px" style="background:orange;" height="113px"></div>
    <div onclick="changeF('violet')"><img width="170px" style="background:violet;" height="113px"></div>
    <div onclick="changeF('white')"><img width="170px" style="background:white;" height="113px"></div>
    <div onclick="changeF('black')"><img width="170px" style="background:black;" height="113px"></div>
</div>

有什么方法可以做到这一点吗？
非常感谢您的回答。

Answer 1

与其将图像向上移动 135 像素，不如简单地删除顶部图像并将其附加到底部？

var rightPanel = document.getElementById('rightPanel');
var images = rightPanel.getElementsByTagName('img');
var downButton = document.getElementById('downButton');
var upButton = document.getElementById('upButton');

downButton.onclick = function(){
    rightPanel.appendChild(images[0]);
}
upButton.onclick = function(){
    rightPanel.insertBefore(images[images.length-1],images[0]);
}

Here's a simple jsFiddle to illustrate what I mean .