Question

我正在尝试制作幻灯片，在图片之间向左滑动。我可以让第一张图像向左滑动，但下一张图像不会显示。

<script>
    $(function(){
        $('.fadein img:gt(0)').hide(); 

        setInterval(function() {
            $('.fadein :first-child').hide("slide", {direction: "left"}, 400)
                    .next('img')
                    .show("slide", {direction: "left"}, 400 ).end()
                    .appendTo('.fadein');
        }, 7000);
    });
</script>

HTML：

<div class="fadein">
<img style="width:600px; height:360px" src="images/fourthslide.jpg">
<img style="width:600px; height:360px" src="images/secondslide.jpg">
<img style="width:600px; height:360px" src="images/thirdslide.jpg">
<img style="width:600px; height:360px" src="images/firstslide.jpg">
</div>

CSS：

.fadein { 
position:relative; 
width:100%;
height:430px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
}

.fadein img { 
position:absolute; 
vertical-align: middle;
top:10px;
left:0px;
border-top:1px solid navy;
}

Answer 1

这似乎是jQuery UI的一个问题。如果您的目标元素是内联的，.show()方法无法按预期使用 幻灯片 效果。为了演示，我把JSFiddle放在一起：

使用 幻灯片 ：http://jsfiddle.net/VLqjf/78/
使用 swing ：http://jsfiddle.net/VLqjf/79/

您会注意到，如果效果设置为 swing ，则幻灯片按预期工作（案例2）。但是，当它设置为 幻灯片 时，某些内容会搞砸（案例1）。

问题是jQuery幻灯片效果将您的元素包装在样式为position:relative的* div.ui_effects_wrapper *中。这打破了图像线。基本的解决方案似乎是你不能内嵌你的图像。

我测试的解决方法是使用.ui-effects-wrapper{display: inline-block !important;}强制* div.ui_effects_wrapper *内联。另外，我将这个div的宽度设置为零，因为当它向左滑动时 - 这有效地将它推开，这样下一个img就可以滑动到位。解决方法就在这个JSFiddle中：http://jsfiddle.net/VLqjf/105/。

滑块幻灯片使用jQuery

1 个答案: