javascript - 制作一个幻灯片

Question

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

谢谢你。

Answer 1

我不相信有任何方法可以单独使用 HTML/CSS 来做到这一点，尽管我可能是错的。当我第一次开始 Web 开发时，我发现查看 Twitter Bootstrap 中的代码以了解它们如何设法创建某些效果/元素很有用。

如果我正确理解您想要什么，我认为您正在寻找Carousel。看看那个，希望它会有所帮助。如果您愿意，您甚至可以使用引导程序。

祝你好运。

Answer 2

谷歌 Jquery 滑块或画廊。

或 CSS 滑块

• http://www.queness.com/post/14329/pure-css3-sliders-and-tutorials
• http://vandelaydesign.com/blog/tools/awesome-jquery-sliders/

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

Answer 3

这是一个非常简单的 jQuery carousel，它会自动滑动。

例子

该代码非常简单且易于使用。

HTML

只是一个带有图像的 DIV

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

CSS

CSS也很简单

#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;
}

JavaScript

不要忘记包括 jQuery // 你可以增加/减少时间

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);
});