我爲我的客戶構建了輪播,它在非引導平臺上完美運行,但是我在引導程序上做了同樣的事情,使它響應,停止響應,就像在非引導平臺上做的那樣。有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>
你能創建小提琴嗎? – vel
https://jsfiddle.net/59w7dvou/1/ 這是它的小提琴,它不是一個一個地滑動,即使不在一行中,也沒有響應,因爲他們應該是。 –
你能檢查這個https://jsfiddle.net/59w7dvou/1/ – vel