Javascript 制作一个<；部门>；幻灯片放映

我想创建一个幻灯片。我的意思是，我想创建一个你有时在网站上看到的东西，你在底部有一排按钮，点击这些按钮会使你淡入一个图像或元素，但如果你不触摸这些按钮，它们会按顺序在彼此之间切换。我怎么能做这样的东西？我是网络开发新手，非常感谢您的帮助。我知道这个任务将需要JavaScript，但是我想避免jQuery，如果可能的话，我仍然会考虑使用jQuery做的建议，所以请不要犹豫发布它们。

---

谢谢。

我不相信单凭HTML/CSS就可以做到这一点，尽管我可能错了。当我第一次开始web开发时，我发现查看Twitter引导程序中的代码很有用，可以了解它们是如何创建某些效果/元素的

如果我正确理解你想要什么，我想你正在寻找。看看这个，希望能有所帮助。如果愿意，您甚至可以使用引导

---

祝你好运。

谷歌Jquery滑块或厨房

或CSS滑块

---

您不需要知道任何jquery就可以获得一个工作滑块。阅读文档并查看示例文件以开始。如果使用jquery，请确保将文件正确链接到文档。

这里有一个非常简单的jquery旋转木马，它可以自动滑动

代码非常简单，也很容易使用

HTML

只是一个有图像的DIV

JavaScript

别忘了也包括jQuery//您可以增加/减少时间

---

非常感谢。我想自己做一个，但我会利用这些资源来做。@MituIP91谢谢你的建议。你给出的链接正是我想要的，但是我更愿意让图像淡入淡出，而不是你展示的例子给出的滑动效果。

<div id="banner_area">
    <img class="active" src="image1.png" />
    <img src="image2.png" />
    <img src="image3.png" />
    <img src="image4.png" />
</div>

#banner_area img 
{
    display:none;
    position: absolute;
}
#banner_area img:first-child 
{
    display:block;
}
#banner_area > img /* Use this to resize all image's container */
{
    width:400px;
    height:250px;
}

function cycleImages() {
    var images = $('#banner_area img'),
        now = images.filter(':visible'),
        next = now.next().length ? now.next() : images.first(),
        speed = 1000;

    now.fadeOut(speed);
    next.fadeIn(speed);
}

$(function () {
    setInterval(cycleImages, 1400);
});