我需要在mouseenter上停止这个旋转木马并在mouseleave之后继续旋转。 有人有什么想法吗?我试图添加mouseleave事件,但我在结构中遗漏了一些东西。我希望有人可以帮助我
$( document ).ready(function() {
$('ul li:even').addClass('even');
$('ul li:odd').addClass('odd');
setTimeout(RotateCarousel(), 1500);
});
function RotateCarousel() {
$("ul li:first-child").animate({ marginLeft: -124 }, 1500, function () {
$("ul li:first-child").appendTo('ul');
$("ul li:last-child").css('margin-Left', 0);
$(".perro" ).mouseenter(function() {
$(".perro" ).stop();
});
RotateCarousel();
});
}
div { width:1080px;overflow:hidden; }
ul { list-style-type:none;width:10000px;margin:0;padding:0; }
li { height:400px;width:108px;float:left;text-align:center;margin:0;padding:0; }
.even {background: #ccc}
.odd {background: #4e4e4e;color:#fff;}
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>
<link href="carutomstyle.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="carujava.js"></script>
</head>
<body>
<div>
<ul>
<li class="perro">Item #1</li>
<li class="perro">Item #2</li>
<li class="perro">Item #3</li>
<li class="perro">Item #4</li>
<li class="perro">Item #5</li>
<li class="perro">Item #6</li>
<li class="perro">Item #7</li>
<li class="perro">Item #8</li>
<li class="perro">Item #9</li>
<li class="perro">Item #10</li>
<li class="perro">Item #11</li>
<li class="perro">Item #12</li>
</ul>
</div>
</body>
</html>
答案 0 :(得分:0)
$(function() {
var list = $('ul');
var perro = $('.perro');
function onAnimate() {
$('ul li:first-child').appendTo('ul');
$('ul li:last-child').css('margin-Left', 0);
move();
}
function move() {
$('ul li:first-child')
.animate({ marginLeft: -124 }, 1500, onAnimate);
}
list.find('li:even').addClass('even');
list.find('li:odd').addClass('odd');
list.on('mouseenter', 'li', function() {
$('ul li:first-child').stop();
});
list.on('mouseleave', move);
move();
});
div { width:1080px;overflow:hidden; }
ul { list-style-type:none;width:10000px;margin:0;padding:0; }
li { height:400px;width:108px;float:left;text-align:center;margin:0;padding:0; }
.even {background: #ccc}
.odd {background: #4e4e4e;color:#fff;}
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>
<link href="carutomstyle.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="carujava.js"></script>
</head>
<body>
<div>
<ul>
<li class="perro">Item #1</li>
<li class="perro">Item #2</li>
<li class="perro">Item #3</li>
<li class="perro">Item #4</li>
<li class="perro">Item #5</li>
<li class="perro">Item #6</li>
<li class="perro">Item #7</li>
<li class="perro">Item #8</li>
<li class="perro">Item #9</li>
<li class="perro">Item #10</li>
<li class="perro">Item #11</li>
<li class="perro">Item #12</li>
</ul>
</div>
</body>
</html>