jquery滑块返回到第一个li项目问题
当我在互联网上探索时,我发现了这个简单的jquery滑块 这里是html源代码jquery滑块返回到第一个li项目问题,jquery,html,css,Jquery,Html,Css,当我在互联网上探索时,我发现了这个简单的jquery滑块 这里是html源代码 <div class="slider--teams"> <div class="slider--teams__team"> <ul id="list" class="cf"> <li> <figure class="active"> <div> <div></div>
<div class="slider--teams">
<div class="slider--teams__team">
<ul id="list" class="cf">
<li>
<figure class="active">
<div>
<div></div>
</div>
<figcaption>
<h2>Billie</h2>
<p>Head of Team</p>
</figcaption>
</figure>
</li>
<li>
<figure>
<div>
<div></div>
</div>
<figcaption>
<h2>Roger</h2>
<p>Art Director</p>
</figcaption>
</figure>
</li>
<li>
<figure>
<div>
<div></div>
</div>
<figcaption>
<h2>Wendy</h2>
<p>Designer</p>
</figcaption>
</figure>
</li>
<li>
<figure>
<div>
<div></div>
</div>
<figcaption>
<h2>Bill</h2>
<p>Development</p>
</figcaption>
</figure>
</li>
<li>
<figure>
<div>
<div></div>
</div>
<figcaption>
<h2>Lorraine</h2>
<p>Front-End Development</p>
</figcaption>
</figure>
</li>
<li>
<figure>
<div>
<div></div>
</div>
<figcaption>
<h2>Wesley</h2>
<p>Marketing Lead</p>
</figcaption>
</figure>
</li>
</ul>
它工作得非常好,只是在我的网站上使用它有一点问题
它自动返回到第一个李,我什么也不做
当我疯狂地点击下一个li时,它通常会返回到第一个li,而我却看不到最后一个li项目
我猜js或css中发生了冲突
有人能帮我吗
这是我的网站有问题。
抱歉,我无法使用JSFIDLE生成相同的问题。
尝试在velocityum中更改
队列:true
。这似乎只会加速问题的发展。现在,当我点击下一项时,它甚至没有移动。正如我所看到的,在ul
a类中,总是得到更新。
var sliderTeam = (function(document, $) {
'use strict';
var $sliderTeams = $('.slider--teams'),
$list = $('#list'),
$listItems = $('#list li'),
$nItems = $listItems.length,
$nView = 3,
autoSlider,
$current = 0,
$isAuto = true,
$acAuto = 2500,
_init = function() {
_initWidth();
_eventInit();
},
_initWidth = function() {
$list.css({
'margin-left': Math.floor(100 / $nView) + '%',
'width': Math.floor(100 * ($nItems / $nView)) + '%'
});
$listItems.css('width', 100 / $nItems + '%');
$sliderTeams.velocity({ opacity: 1 }, { display: "block" }, { delay:1000 });
},
_eventInit = function() {
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element){
window.setTimeout(callback, 1000 / 60);
};
})();
window.requestInterval = function(fn, delay) {
if( !window.requestAnimationFrame &&
!window.webkitRequestAnimationFrame &&
!window.mozRequestAnimationFrame &&
!window.oRequestAnimationFrame &&
!window.msRequestAnimationFrame)
return window.setInterval(fn, delay);
var start = new Date().getTime(),
handle = new Object();
function loop() {
var current = new Date().getTime(),
delta = current - start;
if(delta >= delay) {
fn.call();
start = new Date().getTime();
}
handle.value = requestAnimFrame(loop);
};
handle.value = requestAnimFrame(loop);
return handle;
}
window.clearRequestInterval = function(handle) {
window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) :
window.webkitCancelRequestAnimationFrame ? window.webkitCancelRequestAnimationFrame(handle.value) :
window.mozCancelRequestAnimationFrame ? window.mozCancelRequestAnimationFrame(handle.value) :
window.oCancelRequestAnimationFrame ? window.oCancelRequestAnimationFrame(handle.value) :
window.msCancelRequestAnimationFrame ? msCancelRequestAnimationFrame(handle.value) :
clearInterval(handle);
};
$.each($listItems, function(i) {
var $this = $(this);
$this.on('touchstart click', function(e) {
e.preventDefault();
_stopMove(i);
_moveIt($this, i);
});
});
autoSlider = requestInterval(_autoMove, $acAuto);
},
_moveIt = function(obj, x) {
var n = x;
obj.find('figure').addClass('active');
$listItems.not(obj).find('figure').removeClass('active');
$list.velocity({
translateX: Math.floor((-(100 / $nItems)) * n) + '%',
translateZ: 0
}, {
duration: 1000,
easing: [400, 26],
queue: false
});
},
_autoMove = function(currentSlide) {
if ($isAuto) {
$current = ~~(($current + 1) % $nItems);
} else {
$current = currentSlide;
}
console.log($current);
_moveIt($listItems.eq($current), $current);
},
_stopMove = function(x) {
clearRequestInterval(autoSlider);
$isAuto = false;
_autoMove(x);
};
return {
init: _init
};
})(document, jQuery);
$(window).load(function(){
'use strict';
sliderTeam.init();
});