Jquery 鼠标悬停无法正常工作

发布于 2024-11-20 00:09:15 字数 4162 浏览 0 评论 0原文

我已经编写了一个 jquery 代码，用于在悬停第一个或最后一个

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

您可以在此处查看小提琴：http://jsfiddle.net/9M3dM/

HTML 代码：

CSS 代码：

<前><代码>#slide-wrapper{ 职位：亲属；溢出：隐藏；高度：183px；顶部填充：1px； } #slide-wrapper ul.slide-container{ 溢出：隐藏；位置：绝对；宽度：100%；高度：183px； } ul.slide-container li{ 光标：指针；显示：块；浮动：向左；高度：183像素；右内边距：1px；宽度：145 像素； } ul.slide-container li img{ 边框：无；高度：183像素；宽度：145 像素； } ul.slide-container li.last{ 右填充：0； }

Jquery 代码：

<前><代码>(函数($) { var isAnimating = false; var 方法 = { 初始化：函数（选项）{ var self = this; }, 显示：函数（）{ 方法.slide(); }, 幻灯片：函数（）{ $(".slide-container li.last").mouseover(function () { methods._next(".slide-container", -147); }); $(".slide-container li.first").mouseover(function () { method._prev(".slide-container", 147); }); }, _next：函数（目标，移动）{ var base = parseInt($(target).css("margin-left"), 10); var maxLeng = ($("ul.slide-container li").length * $("ul.slide-container li").not("first").innerWidth()) - (7 * $("ul.幻灯片容器 li").not("first").innerWidth()); if (base == maxLeng || isAnimating) { 返回假； } isAnimating = true; 基础 = 基础 + 移动； $(target).find("li.last").next("li").addClass("last"); $("#slide-wrapper").animate({ “margin-left”：基础 600、“easeInOutSine”、函数（）{ isAnimating = false; $(target).find("li.last:first").removeClass("last"); $(target).find("li.first").removeClass("first").next("li").addClass("first"); }); }, _prev：函数（目标，移动）{ var base = parseInt($(target).css("margin-left"), 10); if (isAnimating || 基础 === 0) { 返回假； } 基础 = 基础 + 移动； isAnimating = true; $(target).find("li.first").prev("li").addClass("first"); $("#slide-wrapper").animate({ “margin-left”：基础 600、“easeInOutSine”、函数（）{ isAnimating = false; $(target).find("li.last").removeClass("last").prev("li").addClass("last"); $(target).find("li.first").removeClass("first"); }); } }; $(文档).ready(函数() { self.display(); }); })(jQuery);

原文

I have been write a jquery code for slide to previous or next image in element when hover the first or last

image but it not work properly, it just slide one time but not smoothly at first mouseover and after that it not slide any more when i mouseover again on it. please take a look and find out what happen in my code, why dont it slide smoothly ? and why do it slide when i mouseover again ? thanks in advance .

You can look at the fiddle here: 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 code :

#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 code :

(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);

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

離殇 2024-11-27 00:09:15

我认为您在发帖时弄乱了代码。

未捕获的语法错误：意外的标记）

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

http://jsfiddle.net/9TRnR/

I think you messed up your code when posting.

Uncaught SyntaxError: Unexpected token )

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

http://jsfiddle.net/9TRnR/

回复收藏 0 原文

~没有更多了~

关于作者

栖竹

暂无简介

文章

25 人气

关注发私信

友情链接

文江博客

Jquery 鼠标悬停无法正常工作

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

三岁铭

alipaysp_VP2a8Q4rgx

拧巴小姐

1649543945

深居我梦

tongsw

友情链接

Jquery 鼠标悬停无法正常工作

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

三岁铭

alipaysp_VP2a8Q4rgx

拧巴小姐

1649543945

深居我梦

tongsw

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。