jQuery幻灯片代码不能很好地工作
jQuery幻灯片代码不能很好地工作
提问于 2013-09-05 05:00:54
我为幻灯片编写了一个JS (jQuery)脚本。它非常简单，只有一个下/前一个按钮。现在：
问题是幻灯片并不是无缝的。当我点击“下一个/前一个”按钮时，它也会显示空图像。所以，如果我有三个图像，然后开始从图#1导航，就会发生这样的情况：
1# -> #2 -> #3 ->empty
虽然它不是空的，它必须返回到#1图像，但它没有。(代替img，我把p)
以下是jsFiddle代码：
http://jsfiddle.net/mostafatalebi/SG3Rq/
以下是JS代码：
$(document).ready(function() {
var x = $('.slide_top').children('p');
x.hide();
var i = 0;
x.eq(i).show();
$("#slide_next").click(function(event){
event.stopPropagation();
event.preventDefault();
x.eq(i).hide();
x.eq(i).next().show();
i = i + 1;
if(i === x.length)
{
i = 0;
}
});
$("#slide_prev").click(function(event){
event.preventDefault();
event.stopPropagation();
x.eq(i).hide();
x.eq(i).prev().show();
i = i - 1;
if(i == x.length)
{
i = 0;
}
});
});以下是HTML代码：
<div class='slide_top'>
<p>This is the first Paragraph</p>
<p>This is the second Paragraph</p>
<p>This is the third Paragraph</p>
</div>
<ul id='slide_top_click'>
<li><a id='slide_prev' href='#' class='slide-next-icon'>Next</a></li>
<li><a id='slide_next' href='#' class='slide-prev-icon'>Previous</a></li>
</ul>回答 2
Stack Overflow用户
回答已采纳
发布于 2013-09-05 05:15:22
在下一座：
if(i == x.length){
i = 0;
x.eq(i).show();
}在PREV块
if(i === 0){
i=x.length-1;
x.eq(i).show();
}else{
i = i - 1;
}在if块中更新此代码。我看到了一个错误，您在next按钮上调用prev方法，在prev按钮上调用下一个方法。不知道那是你的错还是别的什么。
最后守则：
$(document).ready(function(){
var x = $('.slide_top').children('p');
x.hide();
var i = 0;
x.eq(i).show();
$("#slide_next").click(function(event){
event.stopPropagation();
event.preventDefault();
x.eq(i).hide();
x.eq(i).next().show();
i = i + 1;
if(i === x.length){
i = 0;
x.eq(i).show();
}
});
$("#slide_prev").click(function(event){
event.preventDefault();
event.stopPropagation();
alert(i);
x.eq(i).hide();
x.eq(i).prev().show();
if(i === 0){
i=x.length-1;
x.eq(i).show();
}else{
i = i - 1;
}
});
});Stack Overflow用户
发布于 2013-09-05 05:42:06
早上好
我把这个例子做得很好
只需查看下面的代码：http://jsfiddle.net/5HHew/6/
这应该是next和prev的代码。
$("#slide_next").click(function(){
event.stopPropagation();
event.preventDefault();
x.eq(i).hide();
i = i + 1;
if(i === x.length)
{
i = 0;
}
x.eq(i).show();
});
$("#slide_prev").click(function(event){
event.preventDefault();
event.stopPropagation();
x.eq(i).hide();
i = i - 1;
if(i === -1)
{
i = x.length - 1;
}
x.eq(i).show();
}); });另外，你还把你的事情
祝你好运！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18628089
复制相关文章
相似问题
腾讯云开发者
