Question

所以我有这个jquery：

$(function () {
    //make the div take up the space given
    $('div#slideshow').width(100%);
    //make each slide fit within that div easily
    //I would prefer this be done by running through the slideshows div children,
    //rather than having to give each image the class of "slide", but I've had even worse luck with that
    $('.slide').each(function(index){
                $(this).width(90%);
        })
    //hide the first image
    $('#slideshow img:gt(0)').hide();
    setInterval(function () {
        //put each slide up for six seconds and cause it to fade out while the
        //new one fades in over a period of two seconds
        $('#slideshow :first-child').fadeTo(2000, 0)
            .next('img').fadeTo(2000, 1).end().appendTo('#slideshow');
    }, 6000);
});

使用此HTML：

<div id="slideshow">
    <img style='position:relative;' width="400px" src="https://consumermediallc.files.wordpress.com/2014/11/totinos-stock-08-2014.jpg" alt="" class="slide" />
    <img src="https://36.media.tumblr.com/66fa7962b68e90da541078fcc9efdc25/tumblr_inline_nnby3oQs8s1si7eaa_500.jpg" alt="Lightning Ghost" class="slide" />
    <img src="http://ak-hdl.buzzfed.com/static/2014-05/enhanced/webdr02/14/7/enhanced-3829-1400068353-2.jpg" alt="Girraffe-dog" class="slide" />
    <img src="https://www.colourbox.com/preview/2291250-terrible-grimace-men-with-shovel.jpg" alt="Purpleish Kitty" class="slide" />
</div><!--slideshow-->

我说我的jquery中的评论描述了我很好的问题，当我的代码就是这样：

$(function () {
        //hide the first image
        $('#slideshow img:gt(0)').hide();
        setInterval(function () {
            //put each slide up for six seconds and cause it to fade out while the
            //new one fades in over a period of two seconds
            $('#slideshow :first-child').fadeTo(2000, 0)
                .next('img').fadeTo(2000, 1).end().appendTo('#slideshow');
        }, 6000);
    });

它工作正常，但我还必须设置div及其专门为该代码包含的图像，这里的目标是使幻灯片的代码更灵活一些。顺便说一句，这是JSFiddle我一直试图让这个工作：http://jsfiddle.net/75wczrw7/

Answer 1

您有语法错误 - 在宽度调用中将括号中的宽度百分比括起来：

$('div#slideshow').width('100%');
...
$(this).width('90%');

Answer 2

现在，在您的代码中，图像会继续占用新的空间，除非它们都已加载至少一次。你可能需要做的另一个改变是给#slideshow一个位置：relative和.slide position：absolute。

jQuery没有调整图像大小或在幻灯片中播放它们

2 个答案: