水平自动收报机与图像 0 速度点击 js.

Question

https://jsfiddle.net/scriv/yjs21goz/

我已经制作了这个水平代码，但是 当用户单击任何图像时，我需要它停止，直到用户再次单击并放大单击的图像

我试图在注释中添加这段代码，但它完全破坏了代码

$(function(){
var scroller = $('#scroller div.innerScrollArea');
var scrollerContent = scroller.children('ul');
scrollerContent.children().clone().appendTo(scrollerContent);
var curX = 0;
scrollerContent.children().each(function(){
var $this = $(this);
$this.css('left', curX);
curX += $this.outerWidth(true);
});
var fullW = curX / 2;
var viewportW = scroller.width();
// Scrolling speed management
var controller = {curSpeed:0, fullSpeed:2};
var $controller = $(controller);
var tweenToNewSpeed = function(newSpeed, duration)
{
if (duration === undefined)
duration = 600;
$controller.stop(true).animate({curSpeed:newSpeed}, duration);
};
// Pause on hover
scroller.hover(function(){
tweenToNewSpeed(0);
}, function(){
tweenToNewSpeed(controller.fullSpeed);
});
// Pause and enlarge onClick
//  scroller.onClick(function(){
//  tweenToNewSpeed(0);
// }, function(){
//   tweenToNewSpeed(controller,fullSpeed);
// }); 
// Scrolling management; start the automatical scrolling
var doScroll = function()
{
var curX = scroller.scrollLeft();
var newX = curX + controller.curSpeed;
if (newX > fullW*2 - viewportW)
newX -= fullW;
scroller.scrollLeft(newX);
};
setInterval(doScroll, 20);
tweenToNewSpeed(controller.fullSpeed);
});

编辑放大功能(尝试(：

function enlarge() {
var pic = document.getElementById("#scroller li");
if(img.style.width == "50px") {
img.style.width = "200px";
} else {
img.style.width = "50px";
}
} 

Answer 1

使用clearInterval

JSFiddle

在variable中设置setInterval

var myInterval = setInterval(doScroll, 20);

然后添加点击event以切换播放/暂停自动收报机：

$('.innerScrollArea ul li').click(function(){
if (!myInterval) {
myInterval = setInterval(doScroll, 20); // play again!
} else {
clearInterval(myInterval); // pause!
myInterval = null;
}
});