Question

这并不比我想象的更难，但我已陷入死胡同，需要回到正轨。对编码很新，并且知道这不是很难弄清楚，但凭借我目前的编码知识，我只是在进行试验和错误并且进入圈子。所以我听到这是我的最后手段，我不想影响我在这里的评级并被禁止，所以我会尽力解释这个我能做到的......

简单地说:(网站链接：http://missionaryenterprises.com/home.html）此页面的内容部分由未排序列表中的9个框组成。我需要为内容添加更多的框，但不会打扰网站的大小和外观，我想在任一侧添加两个按钮，当点击时，9个更多内容框将滑入并显示。我知道我需要创建一个非常宽的div来容纳另外一组9个内容框，或者我想要的多个内容框。那个div需要有属性溢出：隐藏，这就是我所知道的，我会玩更多，但任何帮助都会非常感激:) Shalom：）

Answer 1

您可以使用jquery的show and hide功能，如api.jquery.com

所示

你的HTML

<button id="showr">Show</button>
<button id="hidr">Hide</button>
<li><a href="#"><img src="" /></a></li>
<li><a href="#"><img src="" /></a></li>
<li><a href="#"><img src="" /></a></li>
<li><a href="#"><img src="" /></a></li>

和你的剧本：

$( "#showr" ).click(function() {
 $( "li" ).first().show( "fast", function showNext() {
   $( this ).next( "li" ).show( "fast", showNext );
  });
});

$( "#hidr" ).click(function() {
 $( "div" ).hide( 1000 );
});

Answer 2

我不喜欢JQuery，所以我将解释如何做到这一点。

首先，请注意我的小提琴。我重新构建了页面。您必须使用CSS在3x3网格上正确显示图像，或使用表格。可能更容易使用表格，但您可以更灵活地使用CSS。我希望我强调三重奏的单独使用。它使事情变得更容易和更清洁。

好的，我这样做的方法是使用JavaScript来交换图片，这些图片通过数组进行圈选。您可以将图片命名为＆＃39; img1＆＃39;到＆＃39; img18＆＃39; （如果你有两组9）或者只是像我一样手动将每个图片名称放在数组中。只需换掉＆＃39; img1＆＃39;等。使用图像的URLS（即.images / img1.png）。

   var set1 = new Array(
'img1','img2','img3','img4','img5','img6','img7','img8','img9'); 

  var set2 = new Array(
'img1','img2','img3','img4','img5','img6','img7','img8','img9');

  var sets = new Array(set1,set2);

接下来，你必须创建一个函数来交换9个图像和下一个9。我使用for循环一次替换所有图像。

 function change(set) { // Set is sets[0], etc.

   for (var i = 1; i<=set.length; i++) { // 9 images in each set
       var img = document.getElementById("img"+i); // img1, img2, etc.
       img.src = set[i]; //Set img.src to the images in the array
   }
 }

然后在有人点击前进/后退按钮时将一组设置传递给该功能。我留给你实现代码来切换集合。这是集数组的优点，因为你可以切换出你使用的集合。

 change(sets[0]);

如果你想要一个花哨的按钮（或CSS它），你可以制作一些按钮或图片链接。然后onClick他们运行该功能来交换图像。

使用CSS进行一些平滑过渡：http://www.w3.org/TR/css3-transitions/ 只要玩弄它，直到找到你喜欢的效果。要实现它，只需在单击按钮时使用JavaScript设置样式。

这是我半完成的小提琴： http://jsfiddle.net/joshlalonde/7Zs7h/6/

使用overflow：hidden滑动div水平

2 个答案: