javascript - 带有图像的水平自动收报机 0 速度 onClick 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

在变量中设置您的setInterval

var myInterval = setInterval(doScroll, 20);

然后添加点击事件来切换播放/暂停代码:

  $('.innerScrollArea ul li').click(function(){

    if (!myInterval) {
      myInterval = setInterval(doScroll, 20); // play again!
    } else {
      clearInterval(myInterval); // pause!
      myInterval = null;
    }

  });