我的第一个开始在主页上旋转图像的地方

Question

我读过"jquery基础知识"，它似乎是启动ojquery的一个流行建议。我也是一个业余但相当舒适的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/