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”函数，因为你没有提供它的来源（认为它与处理“越界”索引有关？），但你似乎在你的使用数字索引IDS。

假设你的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");

});

如何在我的Jquery滑块中使这个子弹导航工作？

2 个答案: