Question

我为我的客户构建了旋转木马，它在非引导平台上运行完美，但我在引导程序上做的同样的事情使它响应它就像在非引导平台上做的那样停止响应。有js问题无法正常工作。

这是我的代码

var $clientcarousel = $('#clients-list');
var clients = $clientcarousel.children().length;
var clientwidth = (clients * 140); // 140px width for each client item 
$clientcarousel.css('width', clientwidth);

var rotating = true;
var clientspeed = 1800;
var seeclients = setInterval(rotateClients, clientspeed);

$(document).on({
  mouseenter: function() {
    rotating = false; // turn off rotation when hovering
  },
  mouseleave: function() {
    rotating = true;
  }
}, '#clients');

function rotateClients() {
  if (rotating != false) {
    var $first = $('#clients-list li:first');
    $first.animate({
      'margin-left': '-140px'
    }, 600, function() {
      $first.remove().css({
        'margin-left': '0px'
      });
      $('#clients-list li:last').after($first);
    });
  }
}
});

#clients {
  display: block;
  margin-bottom: 15px;
}

#clients .clients-wrap {
  display: block;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

#clients .clients-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}

#clients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 200px;
  height: 55px;
  line-height: 55px;
  text-align: center;
}

#clients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  filter: alpha(opacity=65);
  opacity: 0.65;
}

#clients .clients-wrap ul li img:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1.0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div id="clients">
      <div class="clients-wrap">
        <ul id="clients-list" class="clearfix navbar">
          <li class="nav-item"><img class="nav-link img-fluid" src="_images/client01-cartoon-network.png" alt="Cartoon Network"></li>
          <li class="nav-item"><img class="nav-link img-fluid" src="_images/client02-rough-draft-studios.png" alt="Rough Draft Studios"></li>
          <li class="nav-item"><img class="nav-link img-fluid" src="_images/client03-spongebob-movie2.png" alt="SpongeBob Movie #2"></li>
          <li class="nav-item"><img class="nav-link img-fluid" src="_images/client04-apple-inc.png" alt="Apple Computers"></li>
          <li class="nav-item"><img class="nav-link img-fluid" src="_images/client05-google-talk.png" alt="Google chat talk"></li>
          <li class="nav-item"><img class="nav-link img-fluid" src="_images/client06-g4tv.png" alt="G4TV channel"></li>
          <li class="nav-item"><img class="nav-link img-fluid" src="_images/client07-wonka-candy.png" alt="Wonka Chocolates and Candy"></li>
        </ul>
      </div>
      <!-- @end .clients-wrap -->
    </div>
    <!-- @end #clients -->
  </div>

</div>

Answer 1

更新代码：

我包含了jquery https://code.jquery.com/jquery-3.1.0.js

    <div class="container-fluid">
    <div class="row">
    <div class="col-12">


      <div id="clients">
        <div class="clients-wrap">
          <ul id="clients-list" class="clearfix navbar">
            <li class="nav-item"><img class="nav-link img-fluid" src="http://i.imgur.com/sqOrTvo.png" alt="Cartoon Network"></li>
            <li class="nav-item"><img class="nav-link img-fluid" src="http://imgur.com/Eu0IboI.png" alt="Rough Draft Studios"></li>
            <li class="nav-item"><img class="nav-link img-fluid" src="http://imgur.com/n0RJ0p3.png" alt="SpongeBob Movie #2"></li>
            <li class="nav-item"><img class="nav-link img-fluid" src="http://imgur.com/VdV6cWz.png" alt="Apple Computers"></li>
            <li class="nav-item"><img class="nav-link img-fluid" src="http://imgur.com/VdV6cWz.png" alt="Google chat talk"></li>
            <li class="nav-item"><img class="nav-link img-fluid" src="http://imgur.com/udZvHOB.png" alt="G4TV channel"></li>
            <li class="nav-item"><img class="nav-link img-fluid" src="http://imgur.com/EehPfDN.png" alt="Wonka Chocolates and Candy"></li>
          </ul>
        </div><!-- @end .clients-wrap -->
      </div><!-- @end #clients -->
    </div>
    </div>
    </div>



<script>
    var $clientcarousel = $('#clients-list');
    var clients = $clientcarousel.children().length;
    var clientwidth = (clients * 140); // 140px width for each client item 
    $clientcarousel.css('width', clientwidth);

    var rotating = true;
    var clientspeed = 1800;
    var seeclients = setInterval(rotateClients, clientspeed);

    $(document).on({
        mouseenter: function() {
            rotating = false; // turn off rotation when hovering
        },
        mouseleave: function() {
            rotating = true;
        }
    }, '#clients');

    function rotateClients() {
        if (rotating != false) {
            var $first = $('#clients-list li:first');
            $first.animate({
                'margin-left': '-140px'
            }, 600, function() {
                $first.remove().css({
                    'margin-left': '0px'
                });
                $('#clients-list li:last').after($first);
            });
        }
    }
</script>

updated fiddle link

carousel在bootstrap上没有响应

1 个答案: