Каждое другое действие

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

Это стало бы менее двусмысленным, если вы дали ЛУ элемент идентификатор, чтобы вы могли использовать $ («# уль listid ли») вместо $ («уль LI»)

Объяснение:

#('ul#listid li') 

выбирает все объекты li, являющиеся дочерними объектами ul с идентификатором id listid, и возвращает их как объект jQuery.

Этот объект имеет функцию индекса, которая очень похожа на функцию javascript Array.indexOf. Вызов

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

в обработчик щелчка будет возвращать с нуля индекс Li, которая была нажата ($ (это)) в пределах объекта, возвращенного селектором.

Добавьте один, чтобы сделать индекс на основе одного и умножьте на lastWidth, чтобы получить требуемое смещение по краю.

Answer 2

Я бы просто дал идентификатор вашим ли элементам, а затем использовал его, чтобы решить.

<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