for/if循环根据输入多次运行一个函数:: jquery

我从头开始编写滑块，没有插件。for/if循环根据输入多次运行一个函数:: jquery

我有我的滑块工作，基于添加幻灯片在一起，加上或减去滑块窗口的长度。当需要添加分页时，它变得很复杂。我似乎无法围绕需要写入的函数的逻辑来阐述它。

如果按钮1被点击运行功能1次，并去滑动一个。

如果按钮2被点击运行该功能2次，并去滑动两次。 ....等等..

我看到来自这个问题是，如果在幻灯片3和按钮4被点击的功能只需要移动一次不是4次！这是我脑袋破裂的地方，所有的逻辑都溢出了我的耳朵。

我该如何写这样的东西？

这里是我到目前为止的jsfiddle。 http://jsfiddle.net/r5DY8/2/

任何帮助，将不胜感激。

::一个页面上的所有代码，如果你不希望使用的jsfiddle ::

<!DOCTYPE html> 
<html> 
<head> 
<script src='http://code.jquery.com/jquery-1.9.0.min.js'type="text/javascript"></script> 
<link href='http://fonts.googleapis.com/css?family=Marmelad' rel='stylesheet' type='text/css'> 
<style type="text/css"> 

body { 
    font-family: 'Marmelad', sans-serif; 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select:none; 
    user-select:none; 
} 

#slideContainer { 
position: relative; 
width: 990px; 
height: 275px; 
float: left; 
overflow: hidden; 
margin-top:5%; 
margin-left:15%; 
    } 

#slideWrap { 
width: 3960px; 
height: 275px; 
position: absolute; 
top: 0; 
left: 0; 
} 

.slide { 
width: 990px; 
height: 275px; 
float: left; 
} 

.slide:first-child { background-color: #009999; } 
.slide:nth-child(2) { background-color: #CC0033; } 
.slide:nth-child(3) { background-color: #FFFF66; } 
.slide:nth-child(4) { background-color: #006699; } 

#clickLeft{ 
color: black; 
float: left; 
margin: 12% 0% 0 15%; 
/*background: url("prev.png") no-repeat;*/ 
width: 60px; 
height: 60px; 
cursor: pointer; 
list-style: none; 
position: absolute; 
z-index: 9; 
border:1px solid black;/**/ 
} 
#clickRight{ 
color: black; 
float: right; 
margin: 12% 0 0 79.5%; 
/*background: url("next.png") no-repeat;*/ 
width: 60px; 
height: 60px; 
cursor: pointer; 
list-style: none; 
position: absolute; 
border:1px solid black;/**/ 
} 
.dots{ 
width: 9%; 
position: absolute; 
top: 310px; 
text-align: center; 
height: 45px; 
padding-top: 5px; 
background: white; 
left: 43.5%; 
border-radius: 8px; 
list-style:none; 
} 
.dots li { 
display: inline-block; 
list-style:none; 
} 
.dots li:first-child { 
margin-left:-40px; 
} 

.dots li a{ 
width: 16px; 
height: 16px; 
display: block; 
background: #ededed; 
cursor: pointer; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    -o-border-radius: 20px; 
border-radius: 20px; 
margin: 5px; 
} 

.dots li a:hover { background: rgba(0, 0, 0, 0.7); } 
.styleDots { background: #a4acb2; } 
.active { background: #a4acb2; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    -o-border-radius: 20px; 
    border-radius: 20px;} 
li.pagerItem{ 

} 
</style> 
<script type="text/javascript"> 

$(function(){ 

var currentSlidePosition = 0;       
var slideW = 990;            
var allSlides = $('.slide');        
var numberOfSlides = allSlides.length;     
var marker;            

$('.slide').each(function(i) { 
    listNumber=i+1; 
    marker = $("<li>"); 
    marker.addClass('pagerItem '+listNumber); 
    $("<a href='#' ></a>").appendTo(marker); 
     if (i===0){ 
     marker.addClass('active'); 
     } 
     marker.appendTo($(".dots")); 
}); 

allSlides.wrapAll('<div id="moveSlide"></div>').css({'float' : 'left','width' : slideW}); 

$('#moveSlide').css('width', slideW * numberOfSlides); 

$('body').prepend('<li class="controls" id="clickLeft"></li>') 
     .append('<li class="controls" id="clickRight"></li>'); 


$('.controls').click(function(){ 
moveSlide(this); 

moveSlide(this); // running twice because the function is being called twice 
//create a function that says if button 1 is clicked run the function 1 time if button 3 is clicked run the function 3 times.. 

    }); 


var moveSlide = function(thisobject){ 
console.log('function run'); 
    if(($(thisobject).attr('id')=='clickRight')) { 
       if(currentSlidePosition == numberOfSlides-1)currentSlidePosition=0; 
       else currentSlidePosition++; 

       var active = $(".active").removeClass('active'); 
        if(active.next() && active.next().length){ 
         active.next().addClass('active'); 
        } else { 
         active.siblings(":first").addClass('active'); 
        } 

       } else if($(thisobject).attr('id')=='clickLeft'){ 
        if(currentSlidePosition == 0)currentSlidePosition=numberOfSlides-1;      
        else currentSlidePosition--; 

        var active = $(".active").removeClass('active'); 
        if(active.prev() && active.prev().length){ 
         active.prev().addClass('active'); 
        } else { 
         active.siblings(":last").addClass('active'); 
        } 

       } 

       $('#moveSlide').animate({'margin-left' : slideW*(-currentSlidePosition)}); 
    } 
});   




</script> 
</head> 
<body> 
<div id="slideContainer"> 
     <div id="slideWrap"> 
      <div class="slide">1</div> 
      <div class="slide">2</div> 
      <div class="slide">3</div> 
      <div class="slide">4</div> 
    </div> 

</div> 
    <ul class="dots"></ul> 
</body> 
</html>

来源

2014-01-26 Rhaebosis

这比仅仅调用函数多了更复杂。由于动画是异步的，因此您需要在动画完成时再次调用该函数，而不是马上。

添加回调参数的功能，使得它可以使用那些做一些事情，当动画完成：

var moveSlide = function (thisobject, callback) {

添加回调动画：

$('#moveSlide').animate({ 
    'margin-left': slideW * (-currentSlidePosition) 
    }, callback);

做一个功能moveTo这将在正确的方向调用moveSlide，并将其本身用作回调：

function moveTo(target){ 
    if (target < currentSlidePosition) { 
     moveSlide($('#clickLeft'), function(){ moveTo(target); }); 
    } else if (target > currentSlidePosition) { 
     moveSlide($('#clickRight'), function(){ moveTo(target); }); 
    } 
}

将点击事件绑定到点中的链接。使用index方法来找出你想要去，并呼吁moveTo做该滑块：

$('.dots a').click(function(e){ 
    e.preventDefault(); 
    var target = $(this).parent().index(); 
    moveTo(target); 
});

小提琴：http://jsfiddle.net/Guffa/r5DY8/3/

来源

2014-01-26 12:04:50 Guffa

非常感谢你，这正是我所需要的，我以前从未使用过回调，我了解其余的代码，但这无法实现。请问你能解释一下它的含义。 :) – Rhaebosis

@LadyRhaebosis：回调只是一个函数的引用，当发生某些事情时，通常是在某些事情完成时调用。 'animate'函数是异步的，即它使用计时器来执行动画，以便浏览器可以在其间做其他事情。为了让你知道动画何时完成，它允许回调。 – Guffa

谢谢你解释:) – Rhaebosis

从一个纯粹的逻辑点（假定两个变量的存在 - curr_slide_num和butt_num）：

for (var i=0; i < Math.abs(curr_slide_num - butt_num); i++) my_func();

小心零索引;或者将第一个按钮和第一个幻灯片视为数字0，否则将数学分解。

这不考虑方向滑块应该移动。我没有看过你的小提琴，但我想你会通过方向作为参数的功能。假设函数将方向作为第一个参数 - 字符串'left'或'right'

for (var i=0; i < Math.abs(curr_slide_num - butt_num); i++) 
    my_func(curr_slide_num < butt_num ? 'left' : 'right');

来源

2014-01-26 11:42:41 Utkanos

感谢您的答复，但使用的数学是不是我想要的方式因为点击左侧或右侧的问题在控制滑块的函数内;不在外面，很容易引用。至少与我现在的知识不同。 :) – Rhaebosis

for/if循环根据输入多次运行一个函数:: jquery

回答

相关问题