Nivo Slider Control Nav Animation with javascript

Nivo Slider Control Nav Animation with javascript

本文关键字：with javascript Animation Nav Slider Control Nivo      更新时间：2023-09-26

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

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

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

目前您只移动一次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);
}
相关文章：