здравствуйте даже не знаю как правильно озвучить вопрос, если короче то есть такой код
(function($) {
$.fn.scrollbox = function() {
return this.each(function() {
var container = $(this),
containerUL,
nextScrollId = null,
forward,
scrollForward,
containerUL = container.children('ul:first-child');
scrollForward = function() {
containerUL.children('li').removeClass('boll1 boll2 boll3 boll4 boll5 boll6 boll7 boll8');
containerUL.children('li:nth-child(1)').addClass('boll1');
containerUL.children('li:nth-child(2)').addClass('boll2');
containerUL.children('li:nth-child(3)').addClass('boll3');
containerUL.children('li:nth-child(4)').addClass('boll4');
containerUL.children('li:nth-child(5)').addClass('boll5');
containerUL.children('li:nth-child(6)').addClass('boll6');
containerUL.children('li:nth-child(7)').addClass('boll7');
containerUL.children('li:nth-child(8)').addClass('boll8');
return false;
};
forward = function() {
scrollForward();
return false;
};
// bind events for container
container.bind('forward', function() { clearTimeout(nextScrollId);containerUL.append(containerUL.children('li:nth-child(1)')) ; forward();});
return false;
});
return false;
};return false;
}(jQuery));
смысл такой есть картинки и они двигаются вокруг оси
<div class="wrap-outer boll_main"><div class="wrap" id="demo5">
<ul>
<li class="boll boll1" id=""><img src="/images/img10.png" alt="Lyft"></li>
<li class="boll boll2" id=""><img src="/images/img9.png" alt="Lyft"></li>
<li class="boll boll3" id=""><img src="/images/img8.png" alt="Lyft"></li>
<li class="boll boll4" id=""><img src="/images/img7.png" alt="Lyft"></li>
<li class="boll boll5" id=""><img src="/images/img6.png" alt="Lyft"></li>
<li class="boll boll6" id=""><img src="/images/img5.png" alt="Lyft"></li>
<li class="boll boll7" id=""><img src="/images/img4.png" alt="Lyft"></li>
<li class="boll boll8" id=""><img src="/images/img3.png" alt="Lyft"></li>
</ul>
</div></div>
<script type="text/javascript">
$('#demo5').scrollbox({
});
setInterval(function () {
$('#demo5').trigger('forward');
}, 1000);
</script>
.boll_main .boll { position: absolute;width:240px; height:240px;border-radius: 140px;}
.boll_main #demo5 li img { position: absolute;width:200px; height:200px; top: 18px;left: 20px;}
.boll_main .boll.boll1 { top: 135px;left: 440px; transition: 2s;}
.boll_main .boll.boll2 { top: 68px;left: 675px;transition: 2s;}
.boll_main .boll.boll3{ top: 135px;left: 910px;transition: 2s;}
.boll_main .boll.boll4 { top: 365px;left: 995px;transition: 2s;}
.boll_main .boll.boll5 { top: 596px; left: 910px;transition: 2s;}
.boll_main .boll.boll6 { top: 662px;left: 673px;transition: 2s;}
.boll_main .boll.boll7 { top: 583px;left: 440px;transition: 2s;}
.boll_main .boll.boll8 { top: 360px;left: 340px;transition: 2s;}
при смене позиций происходит замедление но вот первый эллемент меняется слишком быстро и получается наложение, вот не могу сдеалать так что бы он двигался с одинаковой скоростью со всеми
http://chat.hostserg.irk0.ru/oktyabr
