我的想法是创建一个包含图像的列表,首先隐藏所有项目然后显示第一个项目,然后重复隐藏当前的li然后显示下一个项目。然后当到达最后一个项目时,它将隐藏它然后显示第一个并开始该过程。
在文档上(准备好了)我希望发生以下情况:
这是我正在使用的列表:
<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
});
});
});
答案 0 :(得分:1)
您目前是否遇到过代码问题? Stackoverflow不仅仅是放弃代码项目并让其他人完成它们的地方。
这是一个很好的教程,可以使用与您相同的标记来创建自己的Jquery。
http://tutorialzine.com/2010/11/rotating-slideshow-jquery-css3/
答案 1 :(得分:0)
你也可以看看这个jQuery插件。我之前使用过它,很容易实现。 http://sorgalla.com/projects/jcarousel/