javascript - 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%');