jquery - 我的第一个 jquery - 我从哪里开始在主页上旋转图像？

Question

我读过“jquery 基础知识”，它似乎是入门 jquery 的流行建议。我也是一个业余但相当熟悉 html 和 css 的用户。我已经转到 jquery 页面，希望能找到一个用于更改图像的插件，但该网站表示此部分正在重新开发。

我应该从哪里开始？我应该考虑哪些方法？作为 JS 和 jquery 的新手，我应该尝试自己做这件事还是首先调整别人的工作？

我正在构建一个简单的网站，其中主页有一个主图像，需要每隔几秒更改一次以总共显示大约 4 或 5 个图像。

有人请给我指出正确的方向吗？

Answer 1

如果您不想使用插件，但想乱搞一些代码来实际学习一些东西，那么这可能会对您有所帮助。只需用图像选择器替换 '.home-page-images' 即可看到奇迹发生 - 图像每 5 秒更改一次，并在 1 秒内淡入:

$(function(){

var elements = $('.home-page-images');
var counter = 0;

if( elements.length > 1 ){
    elements.hide();
    elements.first().show();
    setInterval(function() {
        elements.eq(counter).fadeOut('slow');
         counter++;
         if (counter == elements.length) {
             counter = 0;
         }
        elements.eq(counter).fadeIn(1000);
    }, 5000);
}
})

请注意，要实现这一点，您必须输出所有图像，并使用 CSS 将它们相互放置。然后 JS 会处理剩下的事情。

此外，这将帮助您了解 setInterval 的工作原理: http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/