尝试创建一个图像轮播,其速度取决于鼠标定位(即,如果鼠标靠近屏幕边缘,它会快速移动,直接在中间它不会移动等)我现在的问题图像轮播根本不移动。可能有多种原因导致它不起作用,但我不太确定它为什么不起作用,或者即使这是一个“好”轮播算法。
创建了一个速度函数,我确信它需要工作,但只有在看到图像轮播实际移动时我才能知道。
Fiddle
JQuery
$(document).ready(function(){
$('.carousel').mousemove(function(e) {
var mpos = e.pageX;
var speed = $(this).getSpeed(mpos);
var dir = $(this).getDir(mpos);
var $ul = $(this).children('ul');
var cwidth = $ul.width();
$('#speed').html(speed);
if(speed != 0) {
if(dir == -1){
$ul.animate({
left: 0
}, speed, 'linear');
}
if(dir == 1){
$ul.animate({
left: -cwidth
}, speed, 'linear');
}
}
});
});
$.fn.getSpeed = function(mpos){
var width = $(this).width();
var center = width/2;
var ps = (mpos-center)/10;
var speed = ps * ps - (width % 100);
if(speed >= 0) return speed;
else return 0;
};
$.fn.getDir = function(mpos){
var width = $(this).width();
var center = width/2;
if(mpos > center) return 1;
else return -1;
};
HTML
<div class="carousel">
<ul>
<li><img src="http://placehold.it/200x200"/></li>
<li><img src="http://placehold.it/200x200"/></li>
.
.
.
<li><img src="http://placehold.it/200x200"/></li>
</ul>
</div>
<div id="speed"></div>
最佳答案
您必须修复代码才能真正执行您想要的操作,但如果添加以下 css,则不动画的主要问题就可以解决:
.carousel ul {
position:relative;
left:0px;
如果遇到问题,请务必检查文档: http://api.jquery.com/animate/
关于javascript - jQuery 图像轮播不滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23614469/