javascript - HTML-CSS-JS 我怎样才能把它变成 'text carousel' ?

标签 javascript jquery html css carousel

我正在尝试在没有任何帮助的情况下重新创建“文本轮播”。我目前制作了this (拉伸(stretch)它,它还没有反应)。这是我正在尝试的 recreate向下滚动到推荐部分。我检查了他们的网站,但他们是通过使用 Bootstrap 完成的,我试图在没有的情况下重新创建它,仅使用 html、css 和可能的 javascript。

我已经在 codepen 上检查过文本轮播,但它们大多只有一个文本字段,我希望至少有两个。

谢谢你帮助我。

PS:.fa-angle-left.fa-angle-right 来自 FontAwesome,但我很快用来自 google 的图片替换了它们。

最佳答案

如我所见,您正在努力学习自己动手,这太棒了!保持良好的工作!

有多种方法可以实现此行为。我不会为您编写代码,但这里有一些步骤供您尝试和学习:

首先,添加更多 .tekstbalonvolledig div,以便对其进行测试。

第二个CSS部分:

1 - 在宽度为 1000px 的 .tekstbalonvolledig div 周围添加一个 .wrapper div

2 - 添加 overflow: hidden 到 .overlaycontainer

现在是 JS 部分:

1 - 创建一个函数,在 .wrapper 上为 -500px 的 margin-left 设置动画

2 - 添加一个点击事件监听器给你.fa-angle-left来运行这个函数

当然还有很多东西要在你的轮播上实现,但我希望这能帮助你开始:)

关于javascript - HTML-CSS-JS 我怎样才能把它变成 'text carousel' ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44140580/

相关文章:

javascript - 为什么 JavaScript 中的字符串没有添加到数组中?

jquery - iOS 地址栏固定在视口(viewport)错误的顶部

javascript - 我可以在 load() 函数加载的元素上添加/删除类吗?

javascript - 使用CSS显示和隐藏DIV

javascript - RESTful API 中复杂的 POST 参数的可能格式是什么?

javascript - gulp 观察将文件复制两次到不同位置

javascript - Angular : directive function not called

javascript - JS RegEx 将文本拆分为句子

jquery - Tinyscrollbar 在 SimpleModal 中隐藏内容

jquery - 动态创建的日期选择器无法从创建的第二行开始工作