Question

当我悬停第一个或最后一个

图像时，我一直在写一个jquery代码，用于滑动到元素中的上一个或下一个图像但它不能正常工作，它只是滑动一次但在第一次鼠标悬停时不顺畅然后，当我再次将鼠标悬停在它上面时，它不再滑动。请看一下，看看我的代码中发生了什么，为什么它不能顺利滑动？为什么我再次鼠标悬停时会滑动？提前致谢。

你可以在这里看一下小提琴：http://jsfiddle.net/9M3dM/

HTML code：

<div id="slide-wrapper">        
    <ul class="slide-container">      
        <li class="first">                
            <img alt="img slide movie" src="Images1.png" />
        </li>            
        <li>                
            <img alt="img slide movie" src="Images2.png" />
        </li>            
        <li>                
            <img alt="img slide movie" src="Images3.png" />
        </li>            
        <li>                
            <img alt="img slide movie" src="Images9.png" />
        </li>            
        <li>                
            <img alt="img slide movie" src="Images8.png" />
        </li>            
        <li>                
            <img alt="img slide movie" src="Images7.png" />
        </li>            
        <li class="last">                
            <img alt="img slide movie" src="Images6.png" />
        </li>            
        <li>                
            <img alt="img slide movie" src="Images5.png" />
        </li>            
        <li>                
            <img alt="img slide movie" src="Images4.png" />
        </li>            
        <li>                
            <img alt="img slide movie" src="Images3.png" />
        </li>            
        <li>                
            <img alt="img slide movie" src="Images2.png" />
        </li>            
        <li>                
            <img alt="img slide movie" src="Images1.png" />
        </li>        
    </ul>    
</div>

CSS代码：

#slide-wrapper{
    position:relative;
    overflow:hidden;
    height:183px;
    padding-top: 1px;
}
#slide-wrapper ul.slide-container{
    overflow:hidden;
    position:absolute;
    width:100%;
    height:183px;
}
ul.slide-container li{
    cursor: pointer;
    display: block;
    float: left;
    height: 183px;
    padding-right: 1px;
    width: 145px;
}
ul.slide-container li img{
    border: none;
    height: 183px;
    width: 145px;
}
ul.slide-container li.last{
    padding-right: 0;
}

Jquery代码：

(function ($) {
    var isAnimating = false;
    var methods = {
        init: function (options) {
            var self = this;
        },
        display: function () {
            methods.slide();
        },
        slide: function () {
            $(".slide-container li.last").mouseover(function () {
                methods._next(".slide-container", -147);
            });
            $(".slide-container li.first").mouseover(function () {
                methods._prev(".slide-container", 147);
            });
        },
        _next: function (target, move) {
            var base = parseInt($(target).css("margin-left"), 10);
            var maxLeng = ($("ul.slide-container li").length * $("ul.slide-container li").not("first").innerWidth()) - (7 * $("ul.slide-container li").not("first").innerWidth());
            if (base == maxLeng || isAnimating) {
                return false;
            }
            isAnimating = true;
            base = base + move;
            $(target).find("li.last").next("li").addClass("last");
            $("#slide-wrapper").animate({
                "margin-left": base
            }, 600, "easeInOutSine", function () {
                isAnimating = false;
                $(target).find("li.last:first").removeClass("last");
            $(target).find("li.first").removeClass("first").next("li").addClass("first");
            });
        },
        _prev: function (target, move) {
            var base = parseInt($(target).css("margin-left"), 10);
            if (isAnimating || base === 0) {
                return false;
            }
            base = base + move;
            isAnimating = true;
            $(target).find("li.first").prev("li").addClass("first");
            $("#slide-wrapper").animate({
                "margin-left": base
                }, 600, "easeInOutSine", function () {
                    isAnimating = false;
                $(target).find("li.last").removeClass("last").prev("li").addClass("last");
                    $(target).find("li.first").removeClass("first");
            });
        }
    };
    $(document).ready(function () {
        self.display();
    });
})(jQuery);

Answer 1

我觉得你在发帖时搞砸了你的代码。

未捕获的SyntaxError：意外的令牌）

display: function() {}) methods.slide();
//--------------------^

http://jsfiddle.net/9TRnR/

Jquery鼠标悬停无法正常工作

1 个答案: