I have one scrolling image which is in jQuery, it scrolls and logos of the clients appears in scrolling box and it keeps scrolling without a pause. I can increase and decrease the speed. But for pause and then resuming the animation in 2 seconds, I am not able to which I want. Here is the link where I have downloaded the source code http://net.tutsplus.com/tutorials/javascript-ajax/building-a-jquery-image-scroller/
我有一个在jQuery中的滚动图像，它滚动并且客户端的徽标出现在滚动框中并且它保持滚动而没有暂停。我可以增加和减少速度。但是暂停然后在2秒钟内恢复动画，我无法满足要求。这是我下载源代码的链接http://net.tutsplus.com/tutorials/javascript-ajax/building-a-jquery-image-scroller/
**The code in html file**
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {
//remove js-disabled class
$("#viewer").removeClass("js-disabled");
//create new container for images
$("<div>").attr("id", "container").css({ position:"absolute"}).width($(".wrapper").length * 170).height(170).appendTo("div#viewer");
//add images to container
$(".wrapper").each(function() {
$(this).appendTo("div#container");
});
//work out duration of anim based on number of images (1 second for each image)
var duration = $(".wrapper").length * 1000;
//store speed for later (distance / time)
var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;
//set direction
var direction = "rtl";
//set initial position and class based on direction
(direction == "rtl") ? $("div#container").css("left", $("div#viewer").width()).addClass("rtl") : $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr") ;
//animator function
var animator = function(el, time, dir) {
//which direction to scroll
if(dir == "rtl") {
//add direction class
el.removeClass("ltr").addClass("rtl");
//animate the el
el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() {
//reset container position
$(this).css({ left:$("div#imageScroller").width(), right:"" });
//restart animation
animator($(this), duration, "rtl");
//hide controls if visible
($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;
});
} else {
//add direction class
el.removeClass("rtl").addClass("ltr");
//animate the el
el.animate({ left:$("div#viewer").width() + "px" }, time, "linear", function() {
//reset container position
$(this).css({ left:0 - $("div#container").width() });
//restart animation
animator($(this), duration, "ltr");
//hide controls if visible
($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;
});
}
}
//start anim
animator($("div#container"), duration, direction);
//pause on mouseover
$("a.wrapper").live("mouseover", function() {
//stop anim
$("div#container").stop(true);
//show controls
($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outerContainer").css({ opacity:0.7 }).slideDown("slow") : null ;
($("a#rtl").length == 0) ? $("<a>").attr({ id:"rtl", href:"#", title:"rtl" }).appendTo("#controls") : null ;
($("a#ltr").length == 0) ? $("<a>").attr({ id:"ltr", href:"#", title:"ltr" }).appendTo("#controls") : null ;
//variable to hold trigger element
var title = $(this).attr("title");
//add p if doesn't exist, update it if it does
($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title) ;
});
//restart on mouseout
$("a.wrapper").live("mouseout", function(e) {
//hide controls if not hovering on them
(e.relatedTarget == null) ? null : (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null ;
//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
//work out distance left to travel
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")))) ;
//new duration is distance left / speed)
var newDuration = distanceLeft / speed;
//restart anim
animator($("div#container"), newDuration, $("div#container").attr("class"));
});
//handler for ltr button
$("#ltr").live("click", function() {
//stop anim
$("div#container").stop(true);
//swap class names
$("div#container").removeClass("rtl").addClass("ltr");
//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
//work out remaining distance
var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width()));
//new duration is distance left / speed)
var newDuration = distanceLeft / speed;
//restart anim
animator($("div#container"), newDuration, "ltr");
});
//handler for rtl button
$("#rtl").live("click", function() {
//stop anim
$("div#container").stop(true);
//swap class names
$("div#container").removeClass("ltr").addClass("rtl");
//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
//work out remaining distance
var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));
//new duration is distance left / speed)
var newDuration = distanceLeft / speed;
//restart anim
animator($("div#container"), newDuration, "rtl");
});
});
</script>
1 个解决方案
#1
3
There is already code in the example you posted that will stop and resume the animation (the live mouseover and mouseout event handlers on a.wrapper).
您发布的示例中已有代码将停止并恢复动画（a.wrapper上的实时鼠标悬停和mouseout事件处理程序）。
You should be able to take the required code out of those functions, and use it in combination with the jQuery delay function, or JavaScript's native setTimeout function to pause the animation for a specified amount of time.
您应该能够从这些函数中获取所需的代码，并将其与jQuery延迟函数或JavaScript的本机setTimeout函数结合使用，以在指定的时间内暂停动画。
#1
3
There is already code in the example you posted that will stop and resume the animation (the live mouseover and mouseout event handlers on a.wrapper).
您发布的示例中已有代码将停止并恢复动画（a.wrapper上的实时鼠标悬停和mouseout事件处理程序）。
You should be able to take the required code out of those functions, and use it in combination with the jQuery delay function, or JavaScript's native setTimeout function to pause the animation for a specified amount of time.
您应该能够从这些函数中获取所需的代码，并将其与jQuery延迟函数或JavaScript的本机setTimeout函数结合使用，以在指定的时间内暂停动画。