Question

我正在尝试构建我自己的小页面（整页jquery滑块），我正在试图弄清楚如何进行导航，但我似乎无法修复它。

我有一个变量存储窗口的当前宽度，并在需要时调整其大小。

var lastWidth   = $(window).width();
$(window).resize(function(){
    if($(window).width()!=lastWidth){

        //execute code.
    }
});

我的导航是3个项目的简单列表。

<h1>Home</h1>
<ul>
    <li>Portfolio</li>
    <li>Blog</li>
    <li>Contact</li>
</ul>

<div id="pageslider">
    <div id="home">Home content</div>
    <div id="portfolio">Portfolio content</div>
    <div id="blog">Blog content</div>
    <div id="contact">Contact content</div>
<div>

这是为我的#sliderpage

提供正确价值的代码

$("#pageslider").css({"min-width": (lastWidth * 4)});

所以我的想法就是这样，我创建了一个变量，我在其中存储了lastWidth * 1，* 2，* 3。

var scrollWidth = [(-lastWidth * 1),-lastWidth * 2,-lastWidth * 3]

然后，如果我可以将第一个li与该变量中的第一个值相关联，那么我需要适当的保证金。

但显然我无法弄清楚如何做到这一点，这感觉真的很复杂

目前我使用此代码作为点击功能：

$('li').click(function(){
    $('li').each(function(i) {
        $('body').find('#pageslider').animate({
        "margin-left":scrollWidth[i]},1800,
        'easeInOutQuint');
    });
});

这显然不起作用，它确实对点击作出反应，但它并不关心什么是LI。它还运行scrollWidth中的所有值。

以下是我目前设置的一个小jsFiddle：http://jsfiddle.net/L29pq/49/

Answer 1

如果您始终希望第一个列表项指向滑块的第二个宽度，则可以将索引作为乘数引用：

$('ul li').click(function(){
  $('#pageslider').animate({
    "margin-left":lastWidth*(1 + $('ul li').index($(this)))},1800,
    'easeInOutQuint');
});

如果你给ul元素一个id，那么你就可以使用$（'ul #listid li'）代替$（'ul li'）

说明：

#('ul#listid li')

选择具有id listid的ul对象的子对象的所有li对象，并将它们作为jQuery对象返回。

此对象的索引函数与javascript Array.indexOf函数非常相似。电话

#('ul#listid li').index($(this))

单击处理程序中的

将返回由选择器返回的对象中单击的li（$（this））的从零开始的索引。

添加一个以使索引从一开始并乘以lastWidth以获得所需的边距偏移。

Answer 2

我只会给你的li元素一个id，然后用它来决定。

<li id="link1"><a href="" class="portfolio">portfolio</a>
</li>
<li id="link2"><a href="">blogs</a>
</li>
<li id="link3"><a href="">contact</a>
</li>

$('li').click(function() {
    var num = $(this).attr("id");
    num = num.charAt(num.length-1);
    $('body').find('#pageslider').animate({
    "margin-left":scrollWidth[num]},1800);
});

这是一个小提琴，虽然我认为它不是很好，因为小提琴的窗口宽度。你可以看到它正在移动它应该如何。 Fiddle

每个李不同的行动

2 个答案: