Question

我一直在尝试创建一个下一个和后一个按钮，它们逐个遍历表中的图像。

但是下一个按钮，它只会带来第一张图像并停止。

同一个按钮“next”如何具有浏览所有图像的功能？

<p id = "slider"></p>
<div id="galDiv">
<style>
table, th, td {
border: 1px solid black;}
</style>
<table>
<tr>
<td id="1"><img src="gallery/a.jpg" style="width:100px;height:100px;"></td>
<td id="2"><img src="gallery/k.jpg" style="width:100px;height:100px;"></td>
<td id="3"><img src="gallery/2.jpg" style="width:100px;height:100px;" ></td>
<td id="4"><img src="gallery/3.jpg" style="width:100px;height:100px;" ></td>
</tr>
</table>
</div>
<button id="nxt">NEXT</button>

 <script>
 document.getElementById("nxt").onclick = function() 
 {myFunction()};
 function myFunction() { 
 var div = document.getElementById('galDiv');
 var nextSibling = div.nextSibling; 
 while(nextSibling && nextSibling.nodeType != 1) {
 nextSibling = nextSibling.nextSibling }
  } 
  </script>

如何创建后退按钮？

Answer 1

如果您正在尝试创建类似于图像查看器的Facebook，则不应使用表格元素。为了创建这样的东西你应该创建一个带有容器固定侧的div，在这个div中你应该有一个带浮动图像的div然后你的按钮应该改变内部div的正确位置。

或者您可以使用jquery库，例如http://www.jacklmoore.com/colorbox

Answer 2

您的代码什么都不做。 #galDiv的下一个兄弟是<button>。

这是你想要的吗？

＆＃13;

 document.getElementById("nxt").onclick = myFunction;
 function myFunction() {
   var picture = [
     "firstPicture",
     "secondPicture",
     "thirdPicture",
     "fourthPicture"
   ];
   var place = {
     "firstPicture": 0,
     "secondPicture": 1,
     "thirdPicture": 2,
     "fourthPicture": 3
   };
   var table = document.querySelector('table');
   
   if (!table.className) {
     table.className = "firstPicture";
   }
   var nextPicture = (place[table.className] + 1) % 4;
   table.className = picture[nextPicture];
   
 }

＆＃13;

img[src="gallery/a.jpg"] {
  border: 5px solid red;
}
img[src="gallery/k.jpg"] {
  border: 5px solid green;
}
img[src="gallery/2.jpg"] {
  border: 5px solid blue;
}
img[src="gallery/3.jpg"] {
  border: 5px solid black;
}
table {
  border-collapse: collapse;
  position: absolute;
  padding: none;
  border: none;
}

#galDiv {
  width: 113px;
  height: 113px;
  overflow: hidden;
  position: relative;
}

.firstPicture {
  left: 0;
}
.secondPicture {
  left: -112px;
}
.thirdPicture {
  left: -224px;
}
.fourthPicture {
  left: -336px;
}

＆＃13;

<p id = "slider"></p>
<div id="galDiv">
<table>
<tr>
<td id="1"><img src="gallery/a.jpg" style="width:100px;height:100px;"></td>
<td id="2"><img src="gallery/k.jpg" style="width:100px;height:100px;"></td>
<td id="3"><img src="gallery/2.jpg" style="width:100px;height:100px;" ></td>
<td id="4"><img src="gallery/3.jpg" style="width:100px;height:100px;" ></td>
</tr>
</table>
</div>
<button id="nxt">NEXT</button>

＆＃13;

Answer 3

我将curimg属性添加到滑块。自己阅读脚本。您需要添加模数运算来围绕表条目。至于'prev'功能。选择tdnode时，用-1表示同样的事情。

添加孩子后，别忘了设置curimg属性。

祝你好运！

<p id = "slider" curimg='1'></p>
<div id="galDiv">
<style>
table, th, td {

border: 1px solid black;}
</style>
<table>
<tr>
<td id="1"><img src="gallery/a.jpg" style="width:100px;height:100px;"></td>
<td id="2"><img src="gallery/k.jpg" style="width:100px;height:100px;"></td>
<td id="3"><img src="gallery/2.jpg" style="width:100px;height:100px;" ></td>
<td id="4"><img src="gallery/3.jpg" style="width:100px;height:100px;" ></td>
</tr>
</table>
</div>
<button id="nxt">NEXT</button>

 <script>
 document.getElementById("nxt").onclick = function() 
 {myFunction()};
 function myFunction() {
 //Get the slider, parse the int of the 'curimg' attribute
 cid = document.getElementById('slider');
 current_image = parseInt( cid.getAttribute('curimg') );
 //Get the td of that id+1
 tdnode = document.getElementById(current_image + 1);
 //Clone the image childNode into the slider.
 cid.appendChild( td.childNodes[0].cloneNode() );
  } 
  </script>

下一个按钮仅显示第一个图像并停止

3 个答案: