1

我正在尝试构建自己的小（整页 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/

4

2 回答 2

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))。

添加一个以使索引基于 1 并乘以 lastWidth 以获得您需要的边距偏移量。

于 2013-06-21T14:20:20.200 回答
0

我会给你的 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);
});

这是它的一个小提琴，虽然我认为它的效果不是很好，因为小提琴中的窗口宽度。你可以看到它正在按照它应该的方式移动。 小提琴

于 2013-06-21T14:29:46.880 回答