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

很抱歉得到你的观点。你可以试试这个

＆＃13;

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++;
}
});

＆＃13;

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();
});

单击链接到相关滑块项

2 个答案: