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

回答

相關問題