連續滑動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

連續滑動div

回答

相關問題