我正忙着为一家建筑公司制作网站
我有一个 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>
有什么方法可以做到这一点吗?
非常感谢您的回答。
最佳答案
与其将图像向上移动 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]);
}
关于javascript - 图像的垂直面板,希望图像在最后一个之后重新启动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22128297/