Question

我正在从头开始编写一个滑块，没有插件。

我的滑块工作，基于将幻灯片添加到一起并加上或减去滑块窗口的长度。当需要添加分页时，它变得复杂。我似乎无法理解需要编写的函数逻辑。

如果单击按钮1则运行功能1次并转到滑动1。

如果单击按钮2，则运行该功能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>

Answer 1

这比仅仅多次调用函数更复杂。由于动画是异步的，您需要在动画结束时再次调用该函数，而不是立即调用。

向函数添加一个回调参数，以便它可以在动画结束时使用它做一些事情：

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/

Answer 2

从纯粹逻辑的角度来看（假设存在两个变量 - 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');

for / if循环多次运行一个函数，具体取决于input :: jquery

2 个答案: