连续滑动div

我有滑块div内的一些项目，我想动画左边-299px每次点击跳过类的事件被触发，并且动画回到其正常位置，如果它到达与。连续滑动div

请问我该如何做到这一点？

我试过了，但它只动画-299px并停止。

我已经写了一些HTML，CSS和jQuery例如：

CSS

<style> 
.items{ 
    width:299px; 
    height:80px; 
    float:left; 
    color:white; 
} 
.slider{ 
    min-width:1495px; 
    height:80px; 
} 
.container{ 
    width:299px; 
    height:80px; 
} 

.one{ 
background-color:red; 
} 
.two{ 
background-color:yellow; 
} 
.three{ 
background-color:red; 
}

HTML

<a href='#' class='skip'>Skip</a> 
<div class='container'> 
    <div class='slider'> 
     <div class='items one'>Item 1</div> 
     <div class='items two'>Item 2</div> 
     <div class='items three'>Item 3</div> 
    </div> 
</div>

JQUERY

//skiping check em outerHTML 

$(document).on('click','.skip',function(e){ 
    e.preventDefault(); 
    $('.slider').animate({marginLeft:"-299px"},"fast"); 

    //stop default behaviour 
    return false; 
});

来源

2016-11-20 james Oduro

var $slider = $('.slider'); 
 
$(document).on('click','.skip',function(e){ 
 
    e.preventDefault(); 
 
    
 
    if (parseInt($slider.css('marginLeft')) < -(299 * $slider.find('.items').length - 1)) { 
 
     $slider.animate({marginLeft:"0px"}, "fast"); 
 
    } else { 
 
     $slider.animate({marginLeft: "-=299px"}, "fast"); 
 
    } 
 
});

.items{ 
 
    width:299px; 
 
    height:80px; 
 
    float:left; 
 
    color:white; 
 
} 
 
.slider{ 
 
    min-width:1495px; 
 
    height:80px; 
 
} 
 
.container{ 
 
    width:299px; 
 
    height:80px; 
 
} 
 

 
.one{ 
 
background-color:red; 
 
} 
 
.two{ 
 
background-color:yellow; 
 
} 
 
.three{ 
 
background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href='#' class='skip'>Skip</a> 
 
<div class='container'> 
 
    <div class='slider'> 
 
     <div class='items one'>Item 1</div> 
 
     <div class='items two'>Item 2</div> 
 
     <div class='items three'>Item 3</div> 
 
    </div> 
 
</div>

来源

2016-11-20 15:37:24 Taplar

正是我想要的......太感谢你了 –

@詹姆斯Oduro我看到有一个尝试编辑这个，所以我会跟进。你会想在事件处理程序之外做选择器，所以它只发生一次。这是为了表现。没有理由每次都查找元素。 – Taplar

你的代码是设置的利润率左属性成为等于到-299px。如果您希望此更改能够随后生效，则必须获得之前的margin-left价值，并通过您想要的数量继续减少该值。

幸运的是，jQuery为您节省了手动递减的麻烦，并支持对CSS的增量更改 - 只需使用-=299px而不是-299px。

$(document).on('click','.skip',function(e){ 
 
    e.preventDefault(); 
 
    $('.slider').animate({marginLeft:"-=299px"},"fast"); 
 
    //        ^magic 
 

 
    //stop default behaviour 
 
    return false; 
 
});

.items{ 
 
    width:299px; 
 
    height:80px; 
 
    float:left; 
 
    color:white; 
 
} 
 
.slider{ 
 
    min-width:1495px; 
 
    height:80px; 
 
} 
 
.container{ 
 
    width:299px; 
 
    height:80px; 
 
} 
 

 
.one{ 
 
background-color:red; 
 
} 
 
.two{ 
 
background-color:yellow; 
 
} 
 
.three{ 
 
background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href='#' class='skip'>Skip</a> 
 
<div class='container'> 
 
    <div class='slider'> 
 
     <div class='items one'>Item 1</div> 
 
     <div class='items two'>Item 2</div> 
 
     <div class='items three'>Item 3</div> 
 
    </div> 
 
</div>

来源

2016-11-20 15:33:48 casraf

回答

相关问题