使用JavaScript的Nivo滑块控制Nav动画

debugcn 发表于 Dev

里卡多BRGWeb

基本上，我想将div.nivo-controlNav 125px向左移动x倍，其中x是其中的标签数量。我的代码不起作用...

该代码来自成人网站。小心打开图像。

的HTML

<div style="visibility: visible;" class="nivo-controlNav">
    <a class="nivo-control" rel="0">
      <img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-01.jpg" alt="">
    </a>
    <a class="nivo-control" rel="1"><img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-02.jpg" alt=""></a>
    <a class="nivo-control" rel="2"><img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-03.jpg" alt=""></a>
    <a class="nivo-control" rel="3"><img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-04.jpg" alt=""></a>
    <a class="nivo-control" rel="4">
     <img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-05.jpg" alt=""></a>
    <a class="nivo-control" rel="5">
     <img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-06.jpg" alt=""></a>
    <a class="nivo-control" rel="6">
     <img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-07.jpg" alt=""></a>
    <a class="nivo-control active" rel="7"><img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-08.jpg" alt=""></a>
    <a class="nivo-control" rel="8">
     <img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-09.jpg" alt=""></a>
    <a class="nivo-control" rel="9">
     <img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-10.jpg" alt=""></a>
    <a class="nivo-control" rel="10">
     <img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-11.jpg" alt=""></a>
    <a class="nivo-control" rel="11">
     <img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-12.jpg" alt=""></a>
    <a class="nivo-control" rel="12">
     <img src="http://spartanas.com.br/novo/wp-content/uploads/sites/1/nggallery/suzan-ferrary-ensaio-dezembro-2014/thumbs/thumbs_curta-temporada-suzana-spartanas-acompanhante-sp-1-13.jpg" alt=""></a></div>

jQuery(document).ready(function($) {
  var imgs = $(".nivo-controlNav > a").length;
  for (var i = 0; i < imgs; i++) {
    $('.nivo-controlNav').animate({'margin-left': '-125px'}, 500);
  }
});

matthias_h

当前，您div.nivo-controlNav只移动一次，可以根据图像数量移动它，并进行以下调整：

var imgs = $(".nivo-controlNav > a").length;
var leftVal;
for (var i = 0; i < imgs; i++) {
  lefVal = i * 125;
  $('.nivo-controlNav').animate({
    'margin-left': -lefVal
  }, 500);
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。