Как зациклить карусель
Есть карусель с таким кодом:
$(function() { $("#viewer").removeClass("js-disabled"); $("<div>").attr("id", "container").css({ position:"absolute"}).width($(".wrapper").length*170).height(170).appendTo("div#viewer"); $(".wrapper").each(function() { $(this).appendTo("div#container"); }); ($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outerContainer").css({ opacity:1 }).slideDown("slow") : null ; ($("a#rtl").length == 0) ? $("<a>").attr({ id:"rtl", title:"rtl" }).appendTo("#controls") : null ; ($("a#ltr").length == 0) ? $("<a>").attr({ id:"ltr", title:"ltr" }).appendTo("#controls") : null ; var duration = $(".wrapper").length * 5000; var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration; var direction = "rtl"; (direction == "rtl") ? $("div#container").css("right", $("div#viewer").width()).addClass("rtl") : $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr") ; var animator = function(el, time, dir) { if(dir == "rtl") { el.removeClass("ltr").addClass("rtl"); el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() { $(this).css({ left:$("div#imageScroller").width(), right:"" }); animator($(this), duration, "rtl"); }); } else { el.removeClass("rtl").addClass("ltr"); el.animate({ left:$("div#viewer").width() + "px" }, time, "linear", function() { $(this).css({ left:0 - $("div#container").width() }); animator($(this), duration, "ltr"); }); } } animator($("div#container"), duration, direction); $("a.wrapper").live("mouseover", function() { $("div#container").stop(true); var title = $(this).attr("title"); ($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title) ; }); $("a.wrapper").live("mouseout", function(e) { var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width()); var distanceLeft = ($("div#container").hasClass("ltr")) ? totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left")))) ; var newDuration = distanceLeft / speed; animator($("div#container"), newDuration, $("div#container").attr("class")); }); $("#ltr").live("click", function() { $("div#container").stop(true); $("div#container").removeClass("rtl").addClass("ltr"); var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width()); var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())); var newDuration = distanceLeft / speed; animator($("div#container"), newDuration, "ltr"); }); $("#rtl").live("click", function() { $("div#container").stop(true); $("div#container").removeClass("ltr").addClass("rtl"); var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width()); var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left")))); var newDuration = distanceLeft / speed; animator($("div#container"), newDuration, "rtl"); }); }); <div id="outerContainer"> <div id="imageScroller"> <div id="viewer" class="js-disabled"> <a class="wrapper" href="#" target="_blank"><img class="logo" src="<?=SITE_TEMPLATE_PATH;?>/img/partners/1.jpg" /></a> <a class="wrapper" href="#" target="_blank"><img class="logo" src="<?=SITE_TEMPLATE_PATH;?>/img/partners/2.jpg" /></a> <a class="wrapper" href="#" target="_blank"><img class="logo" src="<?=SITE_TEMPLATE_PATH;?>/img/partners/3.jpg" /></a> <a class="wrapper" href="#" target="_blank"><img class="logo" src="<?=SITE_TEMPLATE_PATH;?>/img/partners/4.jpg" /></a> <a class="wrapper" href="#" target="_blank"><img class="logo" src="<?=SITE_TEMPLATE_PATH;?>/img/partners/5.jpg" /></a> <a class="wrapper" href="#" target="_blank"><img class="logo" src="<?=SITE_TEMPLATE_PATH;?>/img/partners/6.jpg" /></a> <a class="wrapper" href="#" target="_blank"><img class="logo" src="<?=SITE_TEMPLATE_PATH;?>/img/partners/1.jpg" /></a> <a class="wrapper" href="#" target="_blank"><img class="logo" src="<?=SITE_TEMPLATE_PATH;?>/img/partners/2.jpg" /></a> <a class="wrapper" href="#" target="_blank"><img class="logo" src="<?=SITE_TEMPLATE_PATH;?>/img/partners/3.jpg" /></a> <a class="wrapper" href="#" target="_blank"><img class="logo" src="<?=SITE_TEMPLATE_PATH;?>/img/partners/4.jpg" /></a> <a class="wrapper" href="#" target="_blank"><img class="logo" src="<?=SITE_TEMPLATE_PATH;?>/img/partners/5.jpg" /></a> <a class="wrapper" href="#" target="_blank"><img class="logo" src="<?=SITE_TEMPLATE_PATH;?>/img/partners/6.jpg" /></a> </div> </div> </div> На странице генерируется блок с изображением, повторный показ происходит только тогда, когда все видимые картинки уходят за пределы видимой области. Демо посмотреть можно тут |
И чего зациклить то надо?
|
Часовой пояс GMT +3, время: 13:45. |