将切换和单击功能与 JQuery 相结合

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

我页面的 ... 中的代码：

<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

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