Javascript 如何编辑jquery滑块

我对Javascript/jQuery/CSS3动画不是很有经验

我需要一个动画滑块，所以我从互联网上下载了一个，并试图修改它

在那个横幅上，图像在右边，文本在左边。 但是，我需要左边的图像和右边的文本。 这就是为什么我用这种方式更改图像的

div

和文本的css：

以前的CSS代码：

.da-img {
   position: absolute;
   left: 60%;
}
.da-slide p, .da-slide h2, .da-slide a {
   position: absolute;
   left: 10%;
}

我更改后：

.da-img {
   position: absolute;
   left: 10%;
}
.da-slide p, .da-slide h2, .da-slide a {
   position: absolute;
   left: 40%;
}

更改后，它工作正常：



但是，当滑块从左到右或从右到左移动时，所有东西都会回到它们以前的位置：



我不明白为什么会这样。每次刷新页面后，图像第一次显示在

div

的左侧，但滑块移动后，一切都会改变

---

请告诉我如何修理它。您可以查看我的触摸文件。

要更好地了解关键帧的工作原理，请阅读。他们认为他解释事情的方式真的很好

在你能让它工作之前，你需要玩一些东西：这是你的开始状态：

.da-slide-fromleft h2{
    -webkit-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
    -moz-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
    -o-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
    -ms-animation: fromLeftAnim1 0.6s ease-in 0.6s both;
    animation: fromLeftAnim1 0.6s ease-in 0.6s both;
}

其余部分在css/style.css行#337的示例中，顾名思义就是当它从左侧滑动时会发生什么。该动画响应此关键帧：

@-webkit-keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}

@-webkit-keyframes your_custom_name{
    0%{ left: -10%; opacity: 0; }
    100%{ left: 110%; opacity: 1; }
}

这就像说将我的元素从

-110%

移动到

10%

，同时将其不透明度更改为1。 您需要做的是查看是否有任何现有的关键帧满足您的需要，否则只需复制其中一个关键帧即可更改名称并播放位置（右或左）和

%

所以看起来是这样的：：

.da-slide-fromleft h2{
    -webkit-animation: your_custom_name 0.6s ease-in 0.6s both;
    -moz-animation: your_custom_name 0.6s ease-in 0.6s both;
    -o-animation: your_custom_name 0.6s ease-in 0.6s both;
    -ms-animation: your_custom_name 0.6s ease-in 0.6s both;
    animation: your_custom_name 0.6s ease-in 0.6s both;
}

关键帧是：

@-webkit-keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}

@-webkit-keyframes your_custom_name{
    0%{ left: -10%; opacity: 0; }
    100%{ left: 110%; opacity: 1; }
}

---

此外，您还可以通过播放动画过渡和时间、

轻松输入

、

轻松输出

，等等，使效果更好。。更多信息：

您是否将RightAnim1中的关键帧调整到正确的位置？这和你的动画风格是一致的吗？不，我不明白我是怎么调整的：（这里有一个不错的CSS3动画教程：关于你，我告诉你，我没有任何修改javascript/CSS3动画的知识。我很难理解你的URL和点。我以为js上只有一两行代码就可以解决这些问题。但是，现在我意识到这对我来说很复杂。如果我删除所有用于动画的css，一切都会发生在没有任何动画的情况下放置在我选择的位置。但是，在ie7，它们仍然与我选择的方向相反。因此，我无法处理此问题。请给我一个不需要复杂修改的另一个内容滑块的url。我需要此内容的滑块：@user1896653我明天将帮助您更多内容：）