jQuery的 - 显示/隐藏滑块前prev /下一步按钮
我试图控制一个非常基本的滑块(从简单的例子在线修补)导航。
我的目标是在到达最后一张幻灯片时隐藏“下一步”按钮,相反地在第一张幻灯片中隐藏“上一页”按钮,可以通过捕捉“活动”(当前幻灯片显示)上课,然后隐藏它?
我的相关代码如下:jQuery的 - 显示/隐藏滑块前prev /下一步按钮
jQuery(document).ready(function ($) {
//set vars for slider size
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
//move left function (prev)
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 700, function() {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
//move right function (next)
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 700, function() {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
// call functions on click
$('a.control_prev').click(function() {
moveLeft();
});
$('a.control_next').click(function() {
if ($(this).hasClass('final')){
$('a.control_next').hide();
}
else{
moveRight();
}
});
});
和HTML滑块列表:
<div id="slider">
<a href="#" class="control_next">></a>
<a href="#" class="control_prev"><</a>
<ul>
<li><img src="sme1.png" height="550"/></li>
<li><img src="sme2.png" height="550"/></li>
<li><img src="sme3.png" height="550"/></li>
<li class="final"><img src="sme4.png" height="550"/></li>
</ul>
</div>
我能想到的接近它的不同的方式,但是这是解决方案,我就试图解决锻炼,任何帮助赞赏!
jsfiddle:http://jsfiddle.net/o31ksujt/3/
您可以在动画结尾添加控件。
在您的代码中也出现错误,在您的点击函数中您验证了$(this).hasClass('final')
,但是相对于标签a
,您必须指定$('#slider ul li:first-child')
。
解决方案如下。
-
创建新功能
功能verifyControlButton(){ 如果($( '#滑块UL李:第一胎')。hasClass( “最终”)){ $('一个。 control_next')隐藏();其他{ } else {('a.control_next')。show(); } };
-
设置呼叫到新的方法,在你的移动动作:
//向左移动功能(分组) 功能moveLeft(){ $( '#滑块UL')动画({ 左: + slideWidth },700,function(){('#slider ul li:last-child')。prependTo('#slider ul'); $('#slider ul').css('left' ,'); verifyControlButton(); }); }; //向右移动功能(下) 功能MoveRight的(){ $( '#滑块UL')动画({ 左: - 。slideWidth },700,函数(){ $('#滑块UL李:'first')。appendTo('#slider ul'); $('#slider ul').css('left',''); verifyControlButton(); }); };
-
点击控制通话简单的方法。在点击({) moveLeft(; }()函数)
//调用函数 $( 'a.control_prev')点击。
$('a.control_next')。点击(功能(){ moveRight(); });
谢谢,这肯定适用于'最后'幻灯片(幻灯片4),所以我第一个可以使用相同的逻辑。 – Andyjm 2014-12-03 09:41:45
我已经包括了所有的jQuery和相关HTML,感谢 – Andyjm 2014-12-02 15:50:03
我刚刚创建了一个的jsfiddle并不能得到它做任何事情。你能在这里创建一个片段,或者是一个重现此问题的jsFiddle吗? – j08691 2014-12-02 15:54:08
你忘了你的CSS也添加了,否则我们不能在jsfiddle中使用它。或者只是为我们做一个工作jsfiddle – Stefan 2014-12-02 15:55:00