Javascript 幻灯片DIV'；使用按钮和jQuery从左或右移动

我正在尝试创建一个函数，可以根据过程中的步骤从左或右滑动div

这是我的基本结构：

<button type="submit" id="button1">Go to Step 1</button>
<button type="submit" id="button2">Go to Step 2</button>
<button type="submit" id="button3">Go to Step 3</button>

<div id="container">

    <div id="div1">Text 1</div>
    <div id="div2">Text 2</div>
    <div id="div3">Text 3</div>

</div>

我要做的是，当我在步骤1中按下按钮2（转到步骤2）时，我希望div2从右侧滑入（容器div内部）。当我在步骤3中并按下按钮1（转到步骤1）时，我希望div1从左侧滑入（在容器div内），而不会在经过时看到div2。我们看了不同的jQuery滑块，但它们都能处理图片

下面是一个示例，它按照我的目标做了一些事情，但没有左/右幻灯片功能：（来源：）。如果有不清楚的地方，请提问：）提前谢谢

jsiddle:

我建议使用 你可以滑动div的不仅仅是图像。您不必使用自定义代码实现滑动。

我建议使用

---

你可以滑动div的不仅仅是图像。您不必使用自定义代码实现滑动。

nkwinder已经发布了一个带有jQuery插件的答案，但我继续，将jQuery完全排除在外，我不知道您是否喜欢，但如果您想要这个解决方案，它就在这里，我甚至可能已经修改了您的JSFIDLE，不知道该页面如何工作

我所做的：

我在#容器中放置了另一个元素，以便它包含所有的.box，并将其命名为#slider

文本1
文本2
文本3
.盒子
{
宽度：50px；//因为我不想太乱
高度：20px；//因为我不想到处乱搞
font-size:1em；//因为我不想太乱
float:left；//使它们左右滑动
}
#容器
{
宽度：50px；//窗口效果
高度：20px；//窗口效果
显示：块；
溢出：隐藏；//窗口效果
}
#滑块
{
位置：相对位置；
宽度：200px；//封闭.box
转换：左1s；//没有JQUERY
}
#第一组{
背景颜色：绿色；
}
#第二组{
背景颜色：蓝色；
}
#第三组{
背景颜色：橙色；
}

所有的.box都必须始终可见，并且容器的overflow属性必须设置为hidden，以便剪裁超出其大小的所有内容#滑块的作用是使float:left工作，否则.box的大小与#container相当，性能不太好

现在很容易在div上创建一个漂亮的动画，在#slider上有一个简单的transition属性，因为我们只需移动这个元素，而且#container会剪辑它之外的所有内容，我们可以获得滑动.box的良好效果

---

请记住，这种方法会迫使您编写一些额外的代码（我没有提供）来调整#slider的大小，否则float:left将无法正常工作，.box将出现在彼此的顶部，这将破坏效果。如果您可以自由使用CSS3，您可能可以使用display:flex来解决这个问题。

nkwinder已经发布了一个带有jQuery插件的答案，但我继续说，将jQuery完全排除在外，我不知道您是否更喜欢它，但如果您想要这个解决方案，它就在这里，我甚至可能已经修改了您的JSFIDLE，不知道那页是怎么工作的

我所做的：

我在#容器中放置了另一个元素，以便它包含所有的.box，并将其命名为#slider

文本1
文本2
文本3
.盒子
{
宽度：50px；//因为我不想太乱
高度：20px；//因为我不想到处乱搞
font-size:1em；//因为我不想太乱
float:left；//使它们左右滑动
}
#容器
{
宽度：50px；//窗口效果
高度：20px；//窗口效果
显示：块；
溢出：隐藏；//窗口效果
}
#滑块
{
位置：相对位置；
宽度：200px；//封闭.box
转换：左1s；//没有JQUERY
}
#第一组{
背景颜色：绿色；
}
#第二组{
背景颜色：蓝色；
}
#第三组{
背景颜色：橙色；
}

所有的.box都必须始终可见，并且容器的overflow属性必须设置为hidden，以便剪裁超出其大小的所有内容#滑块的作用是使float:left工作，否则.box的大小与#container相当，性能不太好

现在很容易在div上创建一个漂亮的动画，在#slider上有一个简单的transition属性，因为我们只需移动这个元素，而且#container会剪辑它之外的所有内容，我们可以获得滑动.box的良好效果

---

请记住，这种方法会迫使您编写一些额外的代码（我没有提供）来调整#slider的大小，否则float:left将无法正常工作，.box将出现在彼此的顶部，这将破坏效果。如果可以自由使用CSS3，您可能可以使用display:flex来解决这个问题。

…谢谢您解释解决方案的工作原理。第一次按下按钮时，滑动效果不起作用。另外，当我在div3中并按下以转到div1时，我不想看到div2正在运行。我的问题中没有提到这一点，对不起-我会更新我的问题。叶，对此很抱歉，我在工作中回答时，对回答很快。它在第一次单击时不起作用，因为元素还没有分配“left”css属性，它甚至不存在，这就是为什么首先需要创建它。解决方法是使用slider.style.left=“0px”初始化slider元素；或者将style=“left:0px；”添加到slider div中。@David另一个问题也很容易解决，再一次，很抱歉我没有包括它，但你可以自己解决，真的。好吧，也许没那么容易，因为你必须处理大量的废话，你显然需要使用display:none；在目标元素和当前选定元素之间的所有元素上，但当您执行此操作时，所有

$('#div1').animate({'width': 0}, 500,function(){ // Slides DIV to left
    $('#div1').css('display','none');
    $('#div1').css('width', 1100); // Set the correct with on DIV again
    $('#div2').fadeIn('slow'); // Fade in new DIV
});

<div id="container">
  <div id="slider"> <!-- NEW ELEMENT NEEDED  -->
    <div id="div1" class="boxes">Text 1</div>
    <div id="div2" class="boxes">Text 2</div>
    <div id="div3" class="boxes">Text 3</div>
  </div>
</div>

.boxes 
{
  width: 50px; // CAUSE I DID NOT WANT TO MESS AROUND TOO MUCH
  height: 20px; // CAUSE I DID NOT WANT TO MESS AROUND TOO MUCH
  font-size: 1em; // CAUSE I DID NOT WANT TO MESS AROUND TOO MUCH
  float: left; // SO THAT THEY SLIDE LEFT AND RIGHT
}

#container
{
  width: 50px; // WINDOW EFFECT
  height: 20px; // WINDOW EFFECT
  display: block;
  overflow: hidden; // WINDOW EFFECT
}

#slider
{
  position: relative; 
  width: 200px; // ENCLOSE .boxes
  transition: left 1s; // NO JQUERY
}

#div1 {
  background-color: green;
}
#div2 {
  background-color: blue;
}
#div3 {
  background-color: orange;
}