在悬停时显示元素并暂停自动播放

时间：2014-05-23 03:50:42

标签： javascript jquery

感谢您花时间看这个问题！我遇到这个问题，我有四张自动播放的图片，一次只显示一张，需要执行以下操作：

  • 当鼠标悬停在箭头上方时，当前的自动播放图像应隐藏并显示悬停箭头的图像（例如，如果自动播放刚开始显示顶部图像，我将鼠标悬停在底部箭头顶部的图像应隐藏并告诉我一个我正在徘徊的那个，当鼠标出来时它应该用自动播放继续隐藏它。

我尝试了很多不同的东西，但仍然无法达到效果。

代码如下：

HTML 

<div id="controllers">
                    <img class="images" id="topFeature" src="images/topFeature.png" alt="" title="">
                    <div id="topArrow"></div>
                    <img class="images" id="rightFeature" src="images/rightFeature.png" alt="" title="">
                    <div id="rightArrow"></div>
                    <img class="images" id="bottomFeature" src="images/bottomFeature.png" alt="" title="">
                    <div id="bottomArrow"></div>
                    <img class="images" id="leftFeature" src="images/leftFeature.png" alt="" title="">
                    <div id="leftArrow"></div>
                </div>

CSS 

#controllers #topArrow{

    background: url("../images/arrows.png") left top no-repeat;
    width: 40px;
    height: 30px;
    position: absolute;
    top: 11em;
    left: 17em;
    z-index: 0;
}

#controllers #rightArrow{
    background: url("../images/arrows.png") left -71px no-repeat;
    width: 30px;
    height: 45px;
    position: absolute;
    top: 16.5em;
    left: 23em;
    z-index: 0;
}

#controllers #bottomArrow{
    background: url("../images/arrows.png") left -40px no-repeat;
    width: 40px;
    height: 30px;
    position: absolute;
    top: 23em;
    left: 17em;
    z-index: 0;
}

#controllers #leftArrow{
    background: url("../images/arrows.png") left -120px no-repeat;
    width: 30px;
    height: 45px;
    position: absolute;
    top: 16.5em;
    left: 11em;
    z-index: 0;
}

#controllers #topArrow:hover, #topArrowEffect{
    background: url("../images/arrows.png") right top no-repeat;
    width: 40px;
    height: 30px;
    position: absolute;
    top: 11em;
    left: 16.9em;
}

#controllers #rightArrow:hover, #rightArrowEffect{
    background: url("../images/arrows.png") right -71px no-repeat;
    width: 30px;
    height: 45px;
    position: absolute;
    top: 16.5em;
    left: 23em;
}

#controllers #bottomArrow:hover, #bottomArrowEffect{
    background: url("../images/arrows.png") right -40px no-repeat;
    width: 40px;
    height: 30px;
    position: absolute;
    top: 23em;
    left: 16.9em;
}

#controllers #leftArrow:hover, #leftArrowEffect{
    background: url("../images/arrows.png") right -120px no-repeat;
    width: 30px;
    height: 45px;
    position: absolute;
    top: 16.5em;
    left: 11em;
}

#controllers img#topFeature{
    position: absolute;
    top: -5em;
    z-index: 1;
}

#controllers img#rightFeature{
    position: absolute;
    top: 5.5em;
    left: 25em;
    z-index: 1;
}

#controllers img#bottomFeature{
    position: absolute;
    top: 19em;
    left: -10em;
    z-index: 1;
}

#controllers img#leftFeature{
    position: absolute;
    top: 1em;
    left: -30em;
    z-index: 1;
}

的Javascript 

$(document).ready(function(){
var images = $('.images');
var current = 0;

images.hide();

Slider();

function Slider(){
    $(images[current]).fadeIn('slow').delay(3000).fadeOut('slow');

    switch(current){
        case 0: $('#topArrow').attr('id', 'topArrowEffect').delay(3800).queue(function(){
            $(this).attr('id', 'topArrow');
            $(this).dequeue();
        });
                break;

        case 1: $('#rightArrow').attr('id', 'rightArrowEffect').delay(3800).queue(function(){
            $(this).attr('id', 'rightArrow');
            $(this).dequeue();
        });
                break;

        case 2: $('#bottomArrow').attr('id', 'bottomArrowEffect').delay(3800).queue(function(){
            $(this).attr('id', 'bottomArrow');
            $(this).dequeue();
        });
                break;

        case 3: $('#leftArrow').attr('id', 'leftArrowEffect').delay(3800).queue(function(){
            $(this).attr('id', 'leftArrow');
            $(this).dequeue();
        });
                break;
    }

    $(images[current]).queue(function(){
        current = current < images.length - 1 ? current + 1 : 0;
        Slider();
        $(this).dequeue();
    });
}

    $( "#bottomArrow" ).mouseenter(function(){
    $( "#bottomArrow" ).attr('id', 'bottomArrowEffect');
    images[current].hide();
}).mouseleave(function(){
    $( "#bottomArrow" ).attr('id', 'bottomArrowEffect');
    images[current].show();
});


});

现场示例如下：Live example

我的问题是我无法达到效果，我使用底部箭头做了一个示例，它只显示为悬停但不隐藏并显示图像，我一直在尝试许多不同的事情，但仍然没有做好。

修改1：

我在这里尝试使用右箭头悬停但仍无法正常工作的其他代码：

        $(document).ready(function(){
    var images = $('.images');
    var current = 0;

    images.hide();

    Slider();

    function Slider(){
        $(images[current]).fadeIn('slow').delay(3000).fadeOut('slow');

        switch(current){
            case 0: $('#topArrow').attr('id', 'topArrowEffect').delay(3800).queue(function(){
                $(this).attr('id', 'topArrow');
                $(this).dequeue();
            });
                    break;

            case 1: $('#rightArrow').attr('id', 'rightArrowEffect').delay(3800).queue(function(){
                $(this).attr('id', 'rightArrow');
                $(this).dequeue();
            });
                    break;

            case 2: $('#bottomArrow').attr('id', 'bottomArrowEffect').delay(3800).queue(function(){
                $(this).attr('id', 'bottomArrow');
                $(this).dequeue();
            });
                    break;

            case 3: $('#leftArrow').attr('id', 'leftArrowEffect').delay(3800).queue(function(){
                $(this).attr('id', 'leftArrow');
                $(this).dequeue();
            });
                    break;
        }       

        $(images[current]).queue(function(){
            current = current < images.length - 1 ? current + 1 : 0;
            if(active = true)
                Slider();
            $(this).dequeue();
        });
    }

    function nonSlider(){
        $(images[current]).hide();

        switch(current){
            case 0: $('#topArrow').attr('id', 'topArrowEffect').delay(3800).queue(function(){
                $(this).attr('id', 'topArrow');
                $(this).dequeue();
            });
                    break;

            case 1: $('#bottomArrow').attr('id', 'bottomArrowEffect').delay(3800).queue(function(){
                $(this).attr('id', 'bottomArrow');
                $(this).dequeue();
            });
                    break;

                    break;

            case 3: $('#leftArrow').attr('id', 'leftArrowEffect').delay(3800).queue(function(){
                $(this).attr('id', 'leftArrow');
                $(this).dequeue();
            });
                    break;
        }       

        $(images[current]).queue(function(){
            current = current < images.length - 1 ? current + 1 : 0;
            nonSlider();
            $(this).dequeue();
        });
    }


    $("#rightArrow").on("hover", function(){
        $(this).attr('id', 'rightArrowEffect');
        active = false;
        nonSlider();
        $(images[1]).show();
    }).mouseout(function(){
        $(this).attr('id', 'rightArrow');
        active = false;
        Slider();
    });

});

修改2 

$(document).ready(function(){
                var images = $('.images');
                var current = 0;
                var hovered = false;

                images.hide();

                Slider();

                $('.arrow').each(function () {
                    $(this).on('hover', function () {
                        hovered = true;

                        images[current].dequeue().fadeOut(200);

                        var classes = $(this).attr("class").split(/\s/);
                        var selectedImage = $('#'+classes[1]+'Feature');

                        selectedImage.stop().fadeIn(300);

                        console.log(selectedImage);
                    });
                });


                function Slider(){
                    $(images[current]).fadeIn('slow').delay(3000).fadeOut('slow');

                    switch(current){
                        case 0: $('#topArrow').attr('id', 'topArrowEffect').delay(3800).queue(function(){
                            $(this).attr('id', 'topArrow');
                            $(this).dequeue();
                        });
                                break;

                        case 1: $('#rightArrow').attr('id', 'rightArrowEffect').delay(3800).queue(function(){
                            $(this).attr('id', 'rightArrow');
                            $(this).dequeue();
                        });
                                break;

                        case 2: $('#bottomArrow').attr('id', 'bottomArrowEffect').delay(3800).queue(function(){
                            $(this).attr('id', 'bottomArrow');
                            $(this).dequeue();
                        });
                                break;

                        case 3: $('#leftArrow').attr('id', 'leftArrowEffect').delay(3800).queue(function(){
                            $(this).attr('id', 'leftArrow');
                            $(this).dequeue();
                        });
                                break;
                    }       

                    $(images[current]).queue(function(){
                        current = current < images.length - 1 ? current + 1 : 0;
                        if(!hovered)
                            Slider();
                        $(this).dequeue();
                    });
                }
            });

0 个答案:

没有答案
相关问题
最新问题