Question

我的网站上有幻灯片库。有一个来自我正在使用的JQuery插件的脚本，当我点击锚点时它执行一些功能。我想要做的是看看我是否可以在单击时将暂停按钮更改为悬停状态，然后再单击它再次更改回正常状态。

我尝试这样做只是说img.src ==正常状态然后点击时将其更改为悬停状态。当然没有用，因为当你将鼠标悬停在它上面时，它不再处于正常状态。希望有道理。这是我的代码：

<a id="galleryPause" href="#">
<img src="images/galleryPause.jpg" onmouseover="this.src='images/galleryPauseHover.jpg'" onmouseout="this.src='images/galleryPause.jpg'" style="margin-left:-4px;" />
</a>

我基本上希望保留现有的悬停功能，并为其添加一个点击功能，将默认图像更改为悬停状态并返回。这样，用户就知道画廊已暂停。感谢您的帮助！

更新这是我正在使用的插件的代码。有没有办法可以劫持这段代码让它做我想做的事情？

插件脚本链接：http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js

我页面<head>...</head>中的代码：

<script type="text/javascript">
var autoPlayTime=5000;
    autoPlayTimer = setInterval( autoPlay, autoPlayTime);
    function autoPlay(){
        Slidebox('next');
    }
    $('#bannerWrapper .thumbs .next').click(function () {
        Slidebox('next','next');
    });
    $('#bannerWrapper .thumbs .previous').click(function () {
        Slidebox('previous','next');
    });
});
//slide page to id
function Slidebox(slideTo,autoPlay){
    var animSpeed=1000; //animation speed
    var easeType='easeInOutExpo'; //easing type
    var sliderWidth=$('#bannerWrapper').width();
    var leftPosition=$('#bannerWrapper .container').css("left").replace("px", "");
    $("#bannerWrapper .content").each(function (i) {
        totalContent=i*sliderWidth; 
        $('#bannerWrapper .container').css("width",totalContent+sliderWidth);
    });
    if( !$("#bannerWrapper .container").is(":animated")){
        if(slideTo=='next'){ //next
            if(autoPlay=='stop'){
                clearInterval(autoPlayTimer);
            }
            if(leftPosition==-totalContent){
                $('#bannerWrapper .container').animate({left: 0}, animSpeed, easeType); //reset
            } else {
                 $('#bannerWrapper .container').animate({left: '-='+sliderWidth}, animSpeed, easeType); //next
            }
        } else if(slideTo=='previous'){ //previous
            if(autoPlay=='stop'){
                clearInterval(autoPlayTimer);
            }
            if(leftPosition=='0'){
                $('#bannerWrapper .container').animate({left: '-'+totalContent}, animSpeed, easeType); //reset
            } else {
                $('#bannerWrapper .container').animate({left: '+='+sliderWidth}, animSpeed, easeType); //previous
            }
        } else {
            var slide2=(slideTo-1)*sliderWidth;
            if(leftPosition!=-slide2){
                clearInterval(autoPlayTimer);
                $('#bannerWrapper .container').animate({left: -slide2}, animSpeed, easeType); //go to number
            }
        }
    }
}
</script>

Answer 1

如果您在代码中跟踪单独的“被点击”状态，您可以使用它来确定点击状态，而不是试图劫持悬停状态。然后在悬停时，您可以检查是否已单击图库。如果是这样，请绕过正常的悬停事件，直到将来发生单击。因此，点击状态将暂停/恢复幻灯片放映。

将Toggle和Click函数与JQuery结合使用

1 个答案: