Javascript 如何在单击时停止旋转库

我无法修改此小部件以在单击后停止旋转。有人知道如何添加此功能吗？任何帮助都将不胜感激

提前谢谢

• 迈克

以下是小部件的链接：

下面是Javascript：

    <script>

    jQuery( document ).ready( function(){
        jQuery( '#flip' ).jcoverflip({
          current: 2,


          beforeCss: function( el, container, offset ){
            return [
              $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset -10*offset )+'px', bottom: '20px' }, { } ),
              $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(20,100-20*offset*offset) + 'px' }, {} )
            ];
          },
          afterCss: function( el, container, offset ){
            return [
              $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset + 10*offset)+'px', bottom: '20px' }, { } ),
              $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(20,100-20*offset*offset) + 'px' }, {} )
            ];
          },
          currentCss: function( el, container ){
        jQuery('#flip>li.selected').removeClass('selected');
        el.addClass('selected');
            return [
              $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 75 )+'px', bottom: 0 }, { } ),
              $.jcoverflip.animationElement( el.find( 'img' ), { width: '150px' }, { } )
            ];
          },
          change: function(event, ui){
            jQuery('#scrollbar').slider('value', ui.to*25);
          }
        });

        jQuery('#scrollbar').slider({
          value: 50,
          stop: function(event, ui) {
            if(event.originalEvent) {
              var newVal = Math.round(ui.value/25);
              jQuery( '#flip' ).jcoverflip( 'current', newVal );
              jQuery('#scrollbar').slider('value', newVal*25);
            }
          }
        });
      });

var timer=setInterval(next,5000);

function next(){
    var $next=$('#flip>li.selected').next('li');
    if(!$next.length){$next=$('#flip>li:first-child');}
    $next.click();
}

    </script>

jQuery（文档）.ready（函数（）{
jQuery（'#flip'）.jcip({
当前：2，
beforeCss：函数（el、容器、偏移量）{
返回[
$.jcOverlip.animationElement（el，{左：（container.width（）/2-210-110*offset-10*offset）+'px'，底部：'20px'}，{}），
$.jcOverlip.animationElement（el.find（'img'），{width:Math.max（20100-20*offset*offset）+'px'}，{}）
];
},
afterCss：函数（el、容器、偏移）{
返回[
$.jcOverlip.animationElement（el，{左：（container.width（）/2+110+110*offset+10*offset）+'px'，底部：'20px'}，{}），
$.jcOverlip.animationElement（el.find（'img'），{width:Math.max（20100-20*offset*offset）+'px'}，{}）
];
},
currentCss:函数（el，容器）{
jQuery（'#flip>li.selected'）.removeClass（'selected'）；
el.addClass（“选定”）；
返回[
$.jcOverlip.animationElement（el，{left:（container.width（）/2-75）+'px'，底部：0}，{}），
$.jcOverlip.animationElement（el.find（'img'），{width:'150px'}，{}）
];
},
更改：功能（事件、用户界面）{
jQuery（“#滚动条”）.slider（'value'，ui.to*25）；
}
});
jQuery（“#滚动条”）.slider({
价值：50，
停止：功能（事件、用户界面）{
if（事件原始事件）{
var newVal=Math.round（ui.value/25）；
jQuery（'#flip'）.jcvirip（'current'，newVal）；
jQuery（“#滚动条”）.slider（'value'，newVal*25）；
}
}
});
});
var定时器=设置间隔（下一步，5000）；
函数next（）{
var$next=$（'#flip>li.selected'）。next（'li'）；
if（！$next.length）{$next=$（'#flip>li:first child'）；}
$next.click（）；
}

只需将事件处理程序附加到任何DOM元素：

$("a.stop").click(function(){
    clearInterval(timer);
    return false;
});

同样的HTML是：

<a href="#" class="stop">Stop</a>

---

谢谢Praveen，那么如何将事件处理程序附加到上面列出的代码中的DOM元素呢？我似乎无法让它工作。我是否正在添加正确的代码@Oriol您熟悉如何添加此功能吗？我之所以这么问，是因为不久前你还能够用这个小部件帮助我。我真的非常感谢任何帮助或建议。谢谢迈克

$(".ui-jcoverflip--item img").click(function(){
    clearInterval(timer);
    return false;
});