1
我創建了一個樣本靜態滑塊，它具有20％左右的div（顯示下一個或prev幻燈片的一部分的空間）和60％的包含主幻燈片的中心;jquery同步元素點擊
所以，滑塊必須財產以後像
| 20％| 60％主滑動| 20％|：我必須保持這些百分比不變。
當點擊一次，everthing正常工作，否則當我點擊其中一個div多一個simultanious單擊主滑塊應該只移動60％（右或左），但它會觸發多一個調用，所以主幻燈片隨機移動！
如何防止多次點擊函數調用直到完成註釋。
段：
$(document).ready(function(){
\t
\t $("#slide-right").on("click", function(event){
\t \t event.stopImmediatePropagation
\t \t slide('right');
\t });
\t
\t $("#slide-left").on("click", function(event){
\t \t event.stopImmediatePropagation
\t \t slide('left');
\t });
});
function slide(direction){
\t
\t var slider_width = $("#slide_container").width();
\t $(".slide").each(function(index) {
\t \t var elmnt_left = $(this).position().left;
\t \t //alert(this.id)
\t \t
\t \t var val = 100 * elmnt_left/slider_width;
\t \t var percentage = 0;
\t \t
\t \t // direction slide to left
\t \t if(direction == 'left'){
\t \t \t if(index == 0) {
\t \t \t \t if(val > -100)
\t \t \t \t \t percentage = val - 60;
\t \t \t } \t \t \t
\t \t \t else if(index == 1) {
\t \t \t \t if(val > -40)
\t \t \t \t \t percentage = val - 60;
\t \t \t } \t \t \t \t
\t \t \t else if(index == 2){
\t \t \t \t if(val > 20)
\t \t \t \t \t percentage = val - 60;
\t \t \t }
\t \t }else if (direction == 'right'){ // direction slide to right
\t \t \t if(index == 0) {
\t \t \t \t if(val < 20)
\t \t \t \t \t percentage = val + 60;
\t \t \t } \t \t \t
\t \t \t else if(index == 1) {
\t \t \t \t if(val < 80)
\t \t \t \t \t percentage = val + 60;
\t \t \t } \t \t \t \t
\t \t \t else if(index == 2){
\t \t \t \t if(val < 140)
\t \t \t \t \t percentage = val + 60;
\t \t \t }
\t \t } \t
\t \t
\t \t console.log()
\t \t
\t \t if(percentage !== 0){ \t
\t \t \t $(this).animate({
\t \t \t \t left: percentage+'%'
\t \t \t }, 400, function() {
\t \t \t \t // Animation complete.
\t \t \t \t
\t \t \t });
\t \t }
\t \t
\t });
};html,body {
\t width:100%;
\t height:100%;
\t margin:0px;
}
.main{
\t width:100%;
}
#slide_container{
\t position:relative;
\t width:100%;
\t height:300px;
\t overflow:hidden;
\t text-align:center;
}
#slide_container .slide {
\t position:absolute;
\t width: 60%;
\t border:0px solid #ccc;
\t height:100%;
\t display:inline-block;
\t margin:0;
\t opacity:0.7;
}
#slide_container .slide1 {
\t background-color:green;
\t left:20%;
}
#slide_container .slide2 {
\t background-color:gray;
\t left:80%;
\t
}
#slide_container .slide3 {
\t background-color:pink;
\t left:140%;
\t
}
#slide_container #slide-left {
\t display:inline-block;
\t height: 100%;
\t width: 20%;
\t left:0;
\t position:absolute;
\t z-index:100;
}
#slide_container #slide-right {
\t display:inline-block;
\t height: 100%;
\t width: 20%;
\t right:0;
\t position:absolute;
\t z-index:100;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
\t <div class="main">
\t \t <div id="slide_container">
\t \t \t <span id="slide-left"></span>
\t \t \t <span id="slide-right"></span>
\t \t \t <div>
\t \t \t \t <div class="slide slide1" id="1" ></div>
\t \t \t \t <div class="slide slide2" id="2" ></div>
\t \t \t \t <div class="slide slide3" id="3" ></div>
\t \t \t </div>
\t \t </div>
\t </div>
*「同時點擊」*你的意思是雙擊？ –
順便說一句，你做錯了，你不應該動畫每個.slide元素，而是一個單一的父容器。 –
請你多解釋一下！ –