Question

基本上我想将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>

JS

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

Answer 1

目前您只需移动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);
}

使用javascript的Nivo滑块控制导航动画

1 个答案: