點擊鏈接到相關的滑塊項目

Question

我做了一個基本的滑塊使用jQuery，只有margin-left，我不能使用插件。 也無法訪問HTML，下一個和上一個按鈕適用於滑塊轉換。但是現在我需要爲每個滑塊操作鏈接，當您單擊每個滑塊的鏈接時必須轉換到其特定的滑塊。但我不知道如何做到這一點。

HTML

<div class="container"> 
    <button class="previous">previous</button> 
    <div class="item item1">slider 1</div> 
    <div class="item item2">slider 2</div> 
    <div class="item item3">slider 3</div> 
    <div class="item item4">slider 4</div> 
    <button class="next">next</button> 

    <ul> 
     <li><a href="slider1">slider1</a></li> 
     <li><a href="slider2">slider2</a></li> 
     <li><a href="slider3">slider3</a></li> 
     <li><a href="slider4">slider4</a></li> 
    </ul> 
</div> 

jQuery的

var currentSlider = 0; 

$('.next').click(function(e) { 
    if (currentSlider != 1) { 
     $('.item').each(function(index, value) { 
      var currLeft = parseInt($(value).css('margin-left')); 
      var newLeft = currLeft - ($(window).innerWidth()); 
      $(value).css('margin-left', newLeft + 'px'); 
     }); 
     currentSlider += 1; 
    }; 
}); 

$('.previous').click(function(e) { 
    e.preventDefault(); 
    if (currentSlider != -2) { 
     $('.item').each(function(index, value) { 
      var currLeft = parseInt($(value).css('margin-left')); 
      var newLeft = currLeft + ($(window).innerWidth()); 
      $(value).css('margin-left', newLeft + 'px'); 

     }); 

     currentSlider -= 1; 
    }; 
}); 

JSFIDDLE

Answer 1

對不起你了點now.You可以試試這個

jQuery("li a").click(function(e){ 
 
e.preventDefault(); 
 
var id = jQuery(this).attr("href"); 
 
var intid = parseInt(id.substr(id.length - 1)); 
 
    alert(jQuery("div.item").length); 
 
jQuery(".item"+id.substr(id.length - 1)).css("margin-left","0px"); 
 
var k = 1; 
 
for(i = intid-1;i>0; i--) 
 
{ 
 
    jQuery(".item"+i).css("margin-left","-" +543*k+"px"); 
 
    k++; 
 
} 
 
var j = 1; 
 
for(i = intid+1;i<=jQuery("div.item").length; i++) 
 
{ 
 
    jQuery(".item"+i).css("margin-left", 543*j+"px"); 
 
    j++; 
 
} 
 
});

Answer 2

更改您的HTML：

<div class="container"> 
    <button class="previous">previous</button> 
    <div class="item item1">slider 1</div> 
    <div class="item item2">slider 2</div> 
    <div class="item item3">slider 3</div> 
    <div class="item item4">slider 4</div> 
    <button class="next">next</button> 

    <ul id="foo"> 
     <li><a href="slider1" data-index="-2">slider1</a></li> 
     <li><a href="slider2" data-index="-1">slider2</a></li> 
     <li><a href="slider3" data-index="0">slider3</a></li> 
     <li><a href="slider4" data-index="1">slider4</a></li> 
    </ul> 
</div> 

更改您的Javascript功能來：

var currentSlider = 0; 

$('.next').click(function(e) { 
    if (currentSlider != 1) { 
     $('.item').each(function(index, value) { 
      var currLeft = parseInt($(value).css('margin-left')); 
      var newLeft = currLeft - ($(window).innerWidth()); 
      $(value).css('margin-left', newLeft + 'px'); 
     }); 
     currentSlider += 1; 
    }; 
}); 

$('.previous').click(function(e) { 
    e.preventDefault(); 
    if (currentSlider != -2) { 
     $('.item').each(function(index, value) { 
      var currLeft = parseInt($(value).css('margin-left')); 
      var newLeft = currLeft + ($(window).innerWidth()); 
      $(value).css('margin-left', newLeft + 'px'); 

     }); 

     currentSlider -= 1; 
    }; 
}); 

function bar(clickedIndex, depth) { 
    if (currentSlider < clickedIndex) { 
     $(".next").click(); 
    } else if (currentSlider > clickedIndex) { 
     $(".previous").click(); 
    } else { 
     return; 
    } 
    setTimeout(function() { 
     bar(clickedIndex, depth + 1); 
    }, 2005); 
} 

$("#foo > li > a").click(function(e) { 
    bar($(this).data("index"), 0); 
    e.preventDefault(); 
});