I've created a scrolling script but i need it to loop when a set div gets to so many pixels to the left, here's my script to do it all but there's no such luck in getting it to work.
var scrollerwidth = 0;
$(window).load(function () {
$('.scroller ul li').each(function() {
scrollerwidth += ($(this).width() + 40);
});
$(".scrollerTwo").css({left: scrollerwidth});
ulScrolls();
});
function ulScrolls(){
$(".scroller, .scrollerTwo").animate({'left': '-=10px'}, 100);
ulScrolls();
}
$(document).ready(function() {
var scrollertwoleft = $(".scrollerTwo").offset().left;
scrollertwoleft = parseInt(scrollertwoleft, 10);
scrollerwidth = parseInt(scrollerwidth, 10);
if(scrollertwoleft <= 100){
$(".scroller").css({left: scrollerwidth});
alert("derp");
}else{
alert(scrollertwoleft);
}
});
Also here's the html that it's putting out(note that the jQuery generates the left positions
<div id="homeSponsorsContent">
<div class="scroller" style="left: -990px;">
<ul>
<li><img src="images/abplogo.png"></li>
<li><img src="images/ansellogo.png"></li>
<li><img src="images/balfourlogo.png"></li>
<li><img src="images/beallogo.png"></li>
<li><img src="images/nhslogo.png"></li>
<li><img src="images/consortlogo.png"></li>
<li><img src="images/brocklesbylogo.png"></li>
<li><img src="images/bupalogo.png"></li>
<li><img src="images/greenergylogo.png"></li>
<li><img src="images/hullcitylogo.png"></li>
<li><img src="images/wittlogo.png"></li>
<li><img src="images/outredlogo.png"></li>
<li><img src="images/omglogo.png"></li>
<li><img src="images/manchesterlogo.png"></li>
<li><img src="images/northumbrialogo.png"></li>
<li><img src="images/mimaslogo.png"></li>
</ul>
</div>
<div class="scrollerTwo" style="left: 2164px;">
<ul>
<li><img src="images/abplogo.png"></li>
<li><img src="images/ansellogo.png"></li>
<li><img src="images/balfourlogo.png"></li>
<li><img src="images/beallogo.png"></li>
<li><img src="images/nhslogo.png"></li>
<li><img src="images/consortlogo.png"></li>
<li><img src="images/brocklesbylogo.png"></li>
<li><img src="images/bupalogo.png"></li>
<li><img src="images/greenergylogo.png"></li>
<li><img src="images/hullcitylogo.png"></li>
<li><img src="images/wittlogo.png"></li>
<li><img src="images/outredlogo.png"></li>
<li><img src="images/omglogo.png"></li>
<li><img src="images/manchesterlogo.png"></li>
<li><img src="images/northumbrialogo.png"></li>
<li><img src="images/mimaslogo.png"></li>
</ul>
</div>
</div>
I'd appreciate any help on the matter, thank you
repeated call of ulScrolls
should something like
setTimeout(function() { ulScrolls() }, 120);
to prevent call stack exceeding and to give time for animation to work.
checking for .scroller
and .scrollerTwo
CSS left
value should be in ulScrolls
.
li
width set to "45px" for testing.
So in total code should look like:
var scrollerwidth = 0;
$(document).ready(function()
{
$('.scroller ul li').each(function()
{
scrollerwidth += $(this).width() + 40;
});
$(".scrollerTwo").css({left: scrollerwidth});
ulScrolls();
});
function ulScrolls()
{
var scrollertwoleft = parseInt($(".scrollerTwo").css('left'));
if (scrollertwoleft <= -scrollerwidth)
{
$(".scrollerTwo").css({left: scrollerwidth});
}
else
{
var scrolleroneleft = parseInt($(".scroller").css('left'));
if (scrolleroneleft <= -scrollerwidth)
{
$(".scroller").css({left: scrollerwidth});
}
}
$(".scroller, .scrollerTwo").animate({'left': '-=10px'}, 100);
setTimeout(function() { ulScrolls(); }, 120);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.