Навигация по слайдеру кодирования

Question

Навигация по слайдеру кодирования

0

** Изменить ** Вот мой jsfiddle: http://jsfiddle.net/t5vSA/4/

Я хочу создать свой собственный слайдер с навигацией. Да, я читал учебники, так как их тысячи, но я не могу понять концепцию этой пулевой навигации, поэтому я прошу помочь ее понять. Я не хочу предложения для плагина.

Мой слайдер настроен так, что он имеет большую ширину с переполнением: скрытый, а затем щелчок по марке даст положительный/отрицательный margin-left от слайда до или после щелчка по слайду.

Это мой код до сих пор.

<div id="slides" width="500px;">
  <div class="slide" id="0" style="width:500px;">
    <p>Content</p>
  </div>
  <div class="slide" id="1" style="width:500px;">
    <p>Content</p>
  </div>
  <div class="slide" id="2" style="width:500px;">
    <p>Content</p>
  </div>
</div>

<ul id="menu">
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ul>

CSS

#wrapper {
overflow:hidden
}

#slides {
overflow:hidden;
width:500px;
height:500px;
}

.slide {
display:inline-block;
height:500px;
float:left;
}

JS

$(document).ready(function(){
  var numSlides = $('#slides .slide').length;
  var slideWidth = $('#slides .slide').width();
  var totalWidth = slideWidth * numSlides;
  // Assign total width of slides
  $('#slides').css('width', totalWidth);
 // Assign width of each slide
  $('#slides .slide').css('width', slideWidth);

// Loop through slides?
  $('#slides .slide').each(function(i) {
  });

// On clicking the navigation
  $('ul#menu li').click(function(e) {
      // Does the sliding I want but doesn't really work.
      $('#slides .slide').prev().animate({'margin-left': '-' + slideWidth}); 
      e.PreventDefault();
  });
});

Я в шоке от щелчка... как бы я это сделал? Я бы хотел хотя бы понять, что я делаю, вместо того, чтобы использовать другой вздутый плагин.

AAA 24 окт. 2013, в 13:03

Источник

0

Если вы добавляете пользовательский интерфейс jquery, существует функция слайдов, которая позволяет вам перемещать содержимое.
Dimitri 24 окт. 2013, в 10:54

Теги:

javascript

jquery

2 ответа

Ещё вопросы

Если вы добавляете пользовательский интерфейс jquery, существует функция слайдов, которая позволяет вам перемещать содержимое.

jacouh · Answer 1 · 2013-10-24T09-17-00.000Z

Я протестировал это:

HTML:

<div id="wrapper">
<div id="slides">
  <div class="slide" id="0" style="width:500px;">
    <p>Content 0</p>
  </div>
  <div class="slide" id="1" style="width:500px;">
    <p>Content 1</p>
  </div>
  <div class="slide" id="2" style="width:500px;">
    <p>Content 2</p>
  </div>
</div>
</div>

<ul id="menu">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>Restore</li>
</ul>

ЯШ:

$(document).ready(function(){
  var numSlides = $('#slides .slide').length;
  var slideWidth = $('#slides .slide').width();
  var totalWidth = slideWidth * numSlides;
  // Assign total width of slides
  $('#slides').css('width', totalWidth);
 // Assign width of each slide
  $('#slides .slide').css('width', slideWidth);

// Loop through slides?
  $('#slides .slide').each(function(i) {
  });

// On clicking the navigation
  $('ul#menu li').click(function(e) {
      // Does the sliding I want but doesn't really work.
      var strID = $(this).text();
      if(strID.match(/Restore/i))
      {
        $('#slides .slide').animate({'margin-left': '0'});
      }
      else
      {
        $('#' + strID).animate({'margin-left': '-' + slideWidth}); 
      }
      e.preventDefault();
  });
});

Если это то, что вы хотите?

Mandip Darji · Answer 2 · 2013-10-24T08-57-00.000Z

в вашем теге li есть некоторые изменения, проверьте ссылку ниже

http://jsfiddle.net/nPbkX/

HTML

<ul id="menu">
        <li id="0" class='active'><a href="#">0</a>
        </li>
        <li id="1"><a href="#">1</a>
        </li>
        <li id="2"><a href="#">2</a>
        </li>
    </ul>

JS

 $('ul#menu li').click(function (e) {

        var id = $(this).attr('id');
        // Does the sliding I want but doesn't really work.
        $('#slides #' + id).prev().animate({
            'margin-left': '-' + slideWidth
        });
    });