jQuery不会调整图像大小或在幻灯片中播放图像

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。