如何在我的Jquery滑塊中使這個子彈導航工作？

Question

我有一個由ul li組成的jquery滑塊，左邊有滑塊，我有一個很好的工作下一個和上一個按鈕，但現在我想添加一個子彈導航。

我對Jquery並不擅長，我想制作一個點擊功能，點擊<a id="view1">它滑到<li id="slide1"> ，當你點擊<a id="view2">它滑到<li id="slide2">等等所以我想知道有誰知道如何寫這個點擊功能

我以為我能做到但是3-4個小時后我仍然找不到好辦法。 如果這是一個愚蠢/無意義的問題，我道歉。

這是我的HTML：

    <div id="slider">
    <ul>
        <li id="slide1"></li>
        <li id="slide2"></li>
        <li id="slide3"></li>
        <li id="slide4"></li>
        <li id="slide5"></li>
    </ul>
    <div class="navigatie">
        <a id="vorige"><img src="prev.jpg"></a>
        <a id="volgende"><img src="next.jpg"></a>
    </div>
</div>
<div id="overview">
     <ul id="ulBullet">
        <li class="bullet1"><a id="view1"></a></li>
        <li class="bullet2"><a id="view1"></a></li>
        <li class="bullet3"><a id="view1"></a></li>
        <li class="bullet4"><a id="view1"></a></li>
        <li class="bullet5"><a id="view1"></a></li>
     </ul>   
</div>

這是我的jquery代碼：

$(document).ready(function(){
var slides = $('#slider ul li');
var slideAantal = slides.length;
var slideBreedte = 1280;
var slideHuidig = 0;

$('#slider ul').css('width', slideAantal * slideBreedte);

$('.navigatie a').click(function() {
    if ($(this).attr('id') == 'volgende') {
        slideHuidig = slideHuidig + 1;
    }
    else {
        slideHuidig = slideHuidig - 1;
    }

    navigatie(slideHuidig);

    $('#slider ul').animate({
        'marginLeft' : (-slideHuidig * slideBreedte)
        });
});

Answer 1

不知道如何使用你的“navigatie”函數，因為你沒有給它的來源（認為它與處理“越界”索引有關）？但你似乎在你的id中使用數字索引。

假設你的id是view1，view2，view3等......你應該能夠從這些id中刪除字母字符，以便只獲取數字部分並將其用作幻燈片索引：

$('#overview ul#ulBullet li').on('click', function() {
    var dest_index = $(this).find('a')[0].id;
    dest_index = ~~dest_index.replace("view", "");
    slideHuidig = dest_index - 1;

    $('#slider ul').animate({
        'marginLeft' : (-slideHuidig * slideBreedte)
    });
});

它並沒有真正滑到“slideX”而是滑到Xth幻燈片。

Answer 2

我找到了一個解決方案，但它可能是壞方法，但添加此點擊功能使其工作完美，這對我來說最重要！

隨意使它更短或更好。

$('.bullet1').click(function(){
            $('#slider ul').animate({
            'marginLeft' : (0)//
        })
            slideHuidig = slideHuidig - slideHuidig;
            $('#vorige').addClass("disableClick");
            $('#volgende').removeClass("disableClick");
            $('#vorige').fadeTo( "slow" , 0.2);
            $('#volgende').fadeTo( "slow" , 0.7);

        $('.bullet1').css("background","#FF0000");
        $('.bullet2').css("background","#ccc");
        $('.bullet3').css("background","#ccc");
        $('.bullet4').css("background","#ccc");
        $('.bullet5').css("background","#ccc");


});

$('.bullet2').click(function(){
            $('#slider ul').animate({
            'marginLeft' : (-1 * slideBreedte)//
        })
            slideHuidig = 1;
            $('#vorige').removeClass("disableClick");
            $('#volgende').removeClass("disableClick");
            $('#vorige').css( "opacity" ,0.7);
            $('#volgende').css( "opacity" , 0.7);

        $('.bullet1').css("background","#ccc");
        $('.bullet2').css("background","#FF0000");
        $('.bullet3').css("background","#ccc");
        $('.bullet4').css("background","#ccc");
        $('.bullet5').css("background","#ccc");


});

$('.bullet3').click(function(){
            $('#slider ul').animate({
            'marginLeft' : (-2 * slideBreedte)//
        })
            slideHuidig = 2;
            $('#vorige').removeClass("disableClick");
            $('#volgende').removeClass("disableClick");
            $('#vorige').css( "opacity" ,0.7);
            $('#volgende').css( "opacity" , 0.7);

        $('.bullet1').css("background","#ccc");
        $('.bullet2').css("background","#ccc");
        $('.bullet3').css("background","#FF0000");
        $('.bullet4').css("background","#ccc");
        $('.bullet5').css("background","#ccc");

});

$('.bullet4').click(function(){
            $('#slider ul').animate({
            'marginLeft' : (-3 * slideBreedte)//
        })
            slideHuidig = 3;
            $('#vorige').removeClass("disableClick");
            $('#volgende').removeClass("disableClick");
            $('#vorige').css( "opacity" ,0.7);
            $('#volgende').css( "opacity" , 0.7);

        $('.bullet1').css("background","#ccc");
        $('.bullet2').css("background","#ccc");
        $('.bullet3').css("background","#ccc");
        $('.bullet4').css("background","#FF0000");
        $('.bullet5').css("background","#ccc");

});

$('.bullet5').click(function(){
            $('#slider ul').animate({
            'marginLeft' : (-4 * slideBreedte)//
        })
            slideHuidig = 4;
            $('#vorige').removeClass("disableClick");
            $('#volgende').addClass("disableClick");
            $('#vorige').css( "opacity" ,0.7);
            $('#volgende').css( "opacity" , "0.2");

        $('.bullet1').css("background","#ccc");
        $('.bullet2').css("background","#ccc");
        $('.bullet3').css("background","#ccc");
        $('.bullet4').css("background","#ccc");
        $('.bullet5').css("background","#FF0000");

});