Question

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

谢谢。

Answer 1

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

如果我理解你想要什么，我认为你正在寻找Carousel。看一看，希望它会有所帮助。如果你愿意，你甚至可以使用bootstrap。

祝你好运。

Answer 2

Google Jquery Sliders或Gallerys。

或CSS滑块

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

Answer 3

这是一个非常简单的jQuery轮播，可以自动滑动。

<强> EXAMPLE

代码非常简单易用。

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

制作<div>幻灯片</div>

3 个答案: