Javascript 在鼠标上跳跃的图像滑块中的最后一个图像

我构建了一个图像滑块，在该特定图像的

mouseenter

上显示2个部分图像和1个完整图像。它工作得很好，直到我将最后一个图像设置为其全宽（使用css）作为默认图像（这样，当用户打开页面时，这1个图像将完全显示）

我使用了

if

语句，因此当其他图像悬停在上方时，默认图像的宽度会减小。但是，只要将鼠标移到包括默认图像在内的任何图像上，最后一个图像就会在另一个图像展开之前立即缩小其宽度。这将在滑块的右侧创建一个临时间隙。我尝试过改变动画时间并使用其他方法，如jQuery的

css（）

方法，但没有成功

同样的问题也发生在

mouseleave

上，当它仅从最后一个“默认”图像中离开包含滑块时

有人知道如何克服这个错误，使动画顺利运行吗

HTML

<div id='imgSlider'>
    <ul>
        <li><img src='images/Girl-skyscraper.jpg' height='300' width='300' /></li>
        <li><img src='images/cities-skies.jpg' height='300' width='300'/></li>
        <li><img src='images/windows.jpg' height='300' width='300' /></li>
    </ul>
</div>

JavaScript

$('div#imgSlider ul li').on({
    mouseenter: function(){
        if($(this) != $('div#imgSlider ul li:last')) {
            $('div#imgSlider ul li:last').animate({
                width: '150'
            },0);
        } 
        $(this).animate({width:'300'},400);
    },
    mouseleave: function(){
        $(this).animate({width:'150'},400);
    }
});

$('div#imgSlider').on('mouseleave',function(){
    $('div#imgSlider ul li:last').animate({
        width:'300'
    },400);
});

---

jsfiddle:

一种不同的方式，使用相同的html

CSS

div#imgSlider {
    height:300px;
    width:600px;
    border:1px solid #2367d3;
}

div#imgSlider ul li {
    float:left;
    width:150px;
    overflow: hidden;
}

div#imgSlider ul li:last-child {
    width:300px;
}

#imgSlider{
     position:relative;
     overflow:hidden;
}

ul{position:relative;}

li{float:left;}

---

使用javascript左右移动您的ul。添加一些逻辑，这样当你滚动到结尾时，它会循环回到开头，或者防止

左

变得比上一张幻灯片的位置更高。

你能做一把小提琴，这样就很容易帮助你了。jsfiddle添加了，希望这有帮助：-）这解决了

鼠标指针的问题，tar。
overflow:hidden
是否仍然有效，因为它是由
li
继承的？就我个人而言，我会将所有图像裁剪为相同的大小和尺寸，并消除溢出的需要：隐藏在
li
上，并在css中设置
的宽度