好的，我已经进行了一些搜索，但我找不到适合我的代码的任何内容，所以我想试一试.
我正在为我的页面构建幻灯片式导航(主要作为学习练习)，我希望能够隐藏第一张幻灯片上的上一页"按钮和最后一张幻灯片上的下一页"按钮，但我似乎无法让它工作.
这是我目前所拥有的:
HTML
<div class="slide"><div class="内容"><p>第二张幻灯片</p>
<div class="slide last"><div class="内容"><p>第三张幻灯片</p>
<div class="slider-nav"><div class="prev">上一页
<div class="next">下一个
jquery
var main = function() {if($('.active-slide').hasClass('first')) {$('.prev').hide();} else if ($('.active-slide').hasClass('last')) {$('.next').hide();} 别的 {$('.prev').show();$('.next').show();}$('.next').click(function() {var currentSlide = $('.active-slide');var nextSlide = currentSlide.next('.slide');//如果nextslide是最后一张，回到第一张if(nextSlide.length===0) {nextSlide = $('.slide').first();}currentSlide.fadeOut(500).removeClass('active-slide');nextSlide.fadeIn(1100).addClass('active-slide');});//上一个幻灯片功能$('.prev').click(function() {var currentSlide = $('.active-slide');var prevSlide = currentSlide.prev('.slide');if(prevSlide.length===0) {prevSlide = $('.slide').last();}currentSlide.fadeOut(600).removeClass('active-slide');prevSlide.fadeIn(600).addClass('active-slide');});};$(document).ready(main);这是具有相同内容的 JSFiddle.我觉得有比在第一张和最后一张幻灯片中使用first"和last"类更好的方法，但我认为这可能更容易.不过，我愿意接受所有建议！
请参阅更正后的小提琴:http://jsfiddle.net/794f4yvw/12/我已将上一个/下一个检查添加为单独的函数，并在每次切换幻灯片时调用:
function checkNavigation() {if ($('.active-slide').hasClass('first')) {$('.prev').hide();$('.next').show();} else if ($('.active-slide').hasClass('last')) {$('.next').hide();$('.prev').show();} 别的 {$('.prev').show();$('.next').show();}}Okay, I've done some searching but I can't quite find anything that works for my code, so I thought I'd give it a shot.
I'm building a slideshow-type navigation for my page (mostly as a learning exercise) and I want to be able to hide the "Prev" button on the first slide and the "next" button on the last slide, but I can't seem to get it to work.
Here's what I have so far:
HTML
<div class="slide active-slide first">
<div class="content">
<p>First Slide</p>
</div>
</div>
<div class="slide">
<div class="content">
<p>second slide</p>
</div>
</div>
<div class="slide last">
<div class="content">
<p>third slide</p>
</div>
</div>
<div class="slider-nav">
<div class="prev">
prev
</div>
<div class="next">
next
</div>
</div>
jquery
var main = function() {
if($('.active-slide').hasClass('first')) {
$('.prev').hide();
} else if ($('.active-slide').hasClass('last')) {
$('.next').hide();
} else {
$('.prev').show();
$('.next').show();
}
$('.next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next('.slide');
//if nextslide is last slide, go back to the first
if(nextSlide.length===0) {
nextSlide = $('.slide').first();
}
currentSlide.fadeOut(500).removeClass('active-slide');
nextSlide.fadeIn(1100).addClass('active-slide');
});
//prev slide function
$('.prev').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev('.slide');
if(prevSlide.length===0) {
prevSlide = $('.slide').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
Here's the JSFiddle with the same thing. I feel like there is a better way to do it than using "first" and "last" classes for my first and last slides, but I thought this might be easier. I'm open to all suggestions though!
please see the corrected fiddle: http://jsfiddle.net/794f4yvw/12/ I've added prev/next check as a separate function and call every time the slide is switched:
function checkNavigation() {
if ($('.active-slide').hasClass('first')) {
$('.prev').hide();
$('.next').show();
} else if ($('.active-slide').hasClass('last')) {
$('.next').hide();
$('.prev').show();
} else {
$('.prev').show();
$('.next').show();
}
}
这篇关于在第一页/最后一页隐藏上一页/下一页按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
