Объединение функций Toggle и Click с JQuery - PullRequest
Новая
       64

Объединение функций Toggle и Click с JQuery

0 голосов
/ 13 января 2011

У меня есть галерея слайд-шоу на моем сайте.Есть скрипт из плагина 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>

1 Ответ

0 голосов
/ 13 января 2011

Если вы отслеживаете отдельное состояние «нажал» в своем коде, вы можете использовать это для определения статуса щелчка, вместо того, чтобы пытаться захватить состояние зависания.Затем при наведении курсора вы можете проверить, была ли нажата галерея.Если это так, обходите обычное событие при наведении до следующего щелчка.Таким образом, состояние щелчка приостановит / возобновит слайд-шоу.

...