Question

我已经构建了一个图像滑块，可以在该特定图像的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>

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;
}

的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：http://jsfiddle.net/XwL2G/

Answer 1

一种不同的做事方式，使用相同的HTML。

<强> CSS

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

ul{position:relative;}

li{float:left;}

使用javascript左右移动你的ul。添加一些逻辑，因此当您滚动到结尾时，它会循环回到开头或阻止left获得高于最后一张幻灯片的位置。

跳过mouseenter的图像滑块中的最后一个图像

1 个答案: