javascript/jquery：カルーセルでページ番号を設定する方法（例：数字

Question

カルーセルでページングを行うにはどうすればいいですか？ドットや数字などが表示されることがあります。 。私は数3をクリックした場合、私はジャバスクリプトの書き方を学んでいるように、その後、第三スライドのアイテムがビューポートにスライドさせなければならないというようにはありませんプラグインしてください例

JS：。

var panelsList = $('.panels'), 
    panel = panelsList.find('li'), 
    panelWidth = panel.outerWidth(true), 
    panelsNum = panel.length, 
    controls = $('.controls'), 
    currPanel = panelsList.find('li:first-child'); 

panelsList.width(panelWidth * panelsNum); 

// controls 
controls.on('click', 'a[data-target]', function(e){ 
    var self = $(this), 
     selfPos = self.index(), 
     self_href = $(self.attr('href')), 
     self_href_pos = self_href.index(); 

    e.preventDefault(); 

    /** slide the corresponding item to viewport: 
    * this is where I'm stuck... I don't know what to do 
    */ 
    self_href.parent().animate({ marginLeft: '-=' + self_href_pos * panelWidth + 'px' }); 

    panel.removeClass('active'); 
    self_href.addClass('active'); 

}); 

HTML ：

<!-- carousel --> 
<div class="carousel"> 
    <div class="fenetre"> 
     <ul class="panels"> 
      <li id="one">1</li> 
      <li id="two">2</li> 
      <li id="three">3</li> 
      <li id="four">4</li> 
      <li id="five">5</li> 
     </ul> 
    </div> 

    <!-- controls --> 
    <ul class="controls"> 
     <li><a href="#" class="prev">prev</a></li> 
     <li><a href="#one" data-target="one">1</a></li> 
     <li><a href="#two" data-target="two">2</a></li> 
     <li><a href="#three" data-target="three">3</a></li> 
     <li><a href="#four" data-target="four">4</a></li> 
     <li><a href="#five" data-target="five">5</a></li> 
     <li class="last"><a href="#" class="next">next</a></li> 
    </ul> 
    <!-- controls --> 
</div> 
<!-- carousel --> 

CSS：

.fenetre { 
    width: 866px; 
    background: #9BBBC7; 
    border: 1px solid #555; 
    overflow: hidden; 
} 

.panels li { 
    border: 1px solid #777; 
    background: #E0D1CC; 
    color: #555; 
    float: left; 
    font-size: 46pt; 
    font-weight: bold; 
    height: 333px; 
    width: 864px; 
} 

/** CONTROLS */ 
.controls { 
    margin-top: 20px; 
    margin-left: 125px; 
} 
.controls li { 
    background: #E0D1CC; 
    border: 1px solid #777; 
    float: left; 
    margin-right: 20px; 
    text-align: center; 
    width: 70px; 
} 

.controls li a { 
    color: #555; 
    display: block; 
    padding: 5px; 
    text-decoration: none; 
} 

多くのありがとうございます。

Answer 1

私はほんの少しの周りにあなたのコードを移動： http://jsfiddle.net/bew6Z/ 私はそれはあなたがこれは私が探していたものである

// controls 
controls.on('click', 'a[data-target]', function(e) { 

    var self = $(this), 
     selfPos = self.index(), 
     self_href = $(self).attr('href'), 
     self_href_pos = $(self_href).index(), 
     scroll_position = self_href_pos * panelWidth; 

    e.preventDefault(); 
    console.log(self, selfPos, self_href, self_href_pos, scroll_position); 

    /** slide the corresponding item to viewport: 
    * this is where I'm stuck... I don't know what to do 
    */ 

    $(self_href).parents('.carousel').animate({ 
     scrollLeft: scroll_position 
    }, 1000); 

    panel.removeClass('active'); 
    $(self_href).addClass('active'); 

});