我的想法是创建一个包含图像的列表，首先隐藏所有项目然后显示第一个项目，然后重复隐藏当前 li 然后显示下一个项目。然后当到达最后一个项目时，它将隐藏它然后显示第一个并重新开始该过程。
在文档（准备好）上，我希望发生以下情况：
- 隐藏所有项目
- 显示第一项
- 重复
- 延迟
- 如果在最后（隐藏此项目/显示第一个项目
- if else（隐藏此项目/显示下一个项目
- onclick（下一个按钮）
- 如果在最后（隐藏此项目/显示第一个项目
- if else（隐藏此项目/显示下一个项目
- onclick（上一个按钮）
- 如果在第一个（隐藏此项/显示最后一项）
- if else（隐藏此项目/显示上一个项目）
这是我正在使用的列表：
<ul id="rotator">
<li class="rimage"><img /></li>
<li class="rimage"><img /></li>
<li class="rimage"><img /></li>
</ul>
我还想要一个左右按钮，可以在不同的项目之间切换。
另外，如果有人愿意，是否可以让它在图像中向左或向右滑动？
谢谢！
更新：
好吧，既然我想到了，我可能不应该在不包括我拥有的代码的情况下问这个问题，我只是觉得我做错了，这就是我到目前为止所做的：
PS：我对Javascript真的很陌生，你可能会说......
$(document).ready(function(){
$('.rimage').hide(function(){
$('.rimage:first').fadeIn(100, function(){
var a = 0;
var mouseover = false;
$('#rotator').mouseover(function(){
mouseover = true;
});
$('#rotator').mouseout(function(){
mouseover = false;
});
//BEGIN LOOP
while (a != 1 && mouseover == false){
if(this == last){
$(this).hide("slide", {direction: "up"}, 400, function(){
$('.rimage:first').show("slide", {direction: "up"}, 400);
});
};
else{
$(this).hide("slide", {direction: "up"}, 400, function(){
$(this).next().show("slide", {direction: "up"}, 400);
});
};
};
//END LOOP
//BUTTONS
//NEXT BUTTON
$('rightarrow').click(function(){
if(this, '.rimage:last'){
$(this).hide("slide", {direction: "up"}, 400, function(){
$('.rimage:first').show("slide", {direction: "up"}, 400);
});
};
else{
$(this).hide("slide", {direction: "up"}, 400, function(){
$(this).next().show("slide", {direction: "up"}, 400);
});
};
});
//PREV BUTTON
$('leftarrow').click(function(){
if(this, '.rimage:first'){
$(this).hide("slide", {direction: "down"}, 400, function(){
$('.rimage:last').show("slide", {direction: "down"}, 400);
});
};
else{
$(this).hide("slide", {direction: "down"}, 400, function(){
$(this).next().show("slide", {direction: "down"}, 400);
});
};
});
//END BUTTONS
});
});
});