Question

我正忙着为一家建筑公司制作一个网站我有一个div，右边有100％的高度位置，这个div内有图像您可以查看此网站here以查看我在说什么。
div下方的箭头显示当前margin-top img内div的{{1}} -135px。（使用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

为什么不简单地移除顶部图像并将其附加到底部，而不是将图像重新移动135px？

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

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

1 个答案: