0

我想在鼠标悬停图像上附加“图像幻灯片”。它有效，但我想在开始的幻灯片上设置延迟。当我按队列设置延迟时，它停止工作......为什么？如何解决？

毫不拖延地工作 jsFidlle 示例

带有延迟和队列的错误 jsFiddle 示例

HTML

<ul>
    <li>
        <a href="http://cargocollective.com/jaimemartinez/" data-galeria="http://cssglobe.com/lab/tooltip/02/1.jpg,http://cssglobe.com/lab/tooltip/02/2.jpg,http://cssglobe.com/lab/tooltip/02/3.jpg,http://cssglobe.com/lab/tooltip/02/4.jpg"   class="preview">
            <img src="http://cssglobe.com/lab/tooltip/02/1.jpg" alt="gallery thumbnail"/>
        </a>
    </li>
</ul>

jQuery

this.imagePreview = function(){ 
        xOffset = 10;
        yOffset = 30;
        var i = 0;
        var interval = null;

    $("a.preview").hover(function(e){
        data_galeria = $(this).data('galeria');
        images = [];
        images = data_galeria.split(",");
        var hreff = images[0];

        $("body").append("<p id='preview'><img id='preview_img' src='"+ hreff +"' alt='Image preview' /></p>");


        intervalID = setInterval(function () {
                i = (i < 2) ? i + 1 : 0;
                var image_src = images[i];
                $('#preview_img').fadeOut("fast", function(){
                   $('#preview_img').attr("src", image_src).hide();
                   $('#preview_img').fadeIn("slow");
                });
        }, 1800); 
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset ) + "px")
            .fadeIn();                        
    },
    function(){
        clearInterval(intervalID);
        $("#preview").remove();
    }); 
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });         
};

$(function() {
                imagePreview();
});

CSS

#preview{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
}
4

1 回答 1

0

好的，我在代码中找到了解决方案和错误...

jsFiddle 工作示例

jQuery

this.imagePreview = function(){ 
        xOffset = 10;
        yOffset = 30;
        var i = 0;
        var interval = null;

    $("a.preview").hover(function(e){
        data_galeria = $(this).data('galeria');
        images = [];
        images = data_galeria.split(",");
        var hreff = images[0];

        $("body").append("<p id='preview'><img id='preview_img' src='"+ hreff +"' alt='Image preview' /></p>");


        intervalID = setInterval(function () {
                i = (i < 2) ? i + 1 : 0;
                var image_src = images[i];
                $('#preview_img').fadeOut("fast", function(){
                   $('#preview_img').attr("src", image_src).hide();
                   $('#preview_img').fadeIn("slow");
                });
        }, 1800); 
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset ) + "px")
            .hide().delay(700).fadeIn();                        
    },
    function(){
        clearInterval(intervalID);
        $("#preview").remove();
    }); 
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });         
};
$(function() {
                imagePreview();
});
于 2013-05-03T10:13:16.457 回答