尝试使用jQuery并尝试制作一个可以旋转三个图像的小型幻灯片.这是我的HTML:
<div id="slideShow">
<img src="images/slides/slide1.jpg" width="520" height="230" />
<img src="images/slides/slide2.jpg" width="520" height="230" />
<img src="images/slides/slide3.jpg" width="520" height="230" />
</div>
Run Code Online (Sandbox Code Playgroud)
这是脚本:
$(function ()
{
var $slides = $('#slideShow img').hide(),
slideIndex = 0;
slideTransition = function ()
{
slideIndex++;
(slideIndex == $slides.length) ? slideIndex = 0: null;
$slides.eq(slideIndex).fadeIn(3000);
$slides.eq(slideIndex).fadeOut(3000,slideTransition);
}
$slides.eq(0).fadeIn(3000);
$slides.eq(0).fadeOut(3000, slideTransition);
});
Run Code Online (Sandbox Code Playgroud)
这实际上工作正常,但我的直觉告诉我,无限递归是一件坏事.关于如何做得更好的任何建议?