所以我有这个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/
答案 0 :(得分:1)
您有语法错误 - 在宽度调用中将括号中的宽度百分比括起来:
$('div#slideshow').width('100%');
...
$(this).width('90%');
答案 1 :(得分:1)
现在,在您的代码中,图像会继续占用新的空间,除非它们都已加载至少一次。你可能需要做的另一个改变是给#slideshow一个位置:relative和.slide position:absolute。