淡入淡出的图像简单的幻灯片javascript/html

我对JavaScript非常新，并试图使用淡出淡出/照片幻灯片放映和我试图使用代码我见过其他地方，但它似乎并没有工作有人可以看看，只是指出我可能会出错的地方。淡入淡出的图像简单的幻灯片javascript/html

HTML

<div id="media" > 
    <img src="test1.jpg" /> 
    <img src="test2.jpg"/> 
    <img src="test3.jpg" /> 
</div>

CSS

#media 
{ 
    border-style:groove; 
    border-width:5px; 
    border-color:green; 
    background-color:purple; 
    height:34%; 
    width:30%; 
    margin-top:40px; 
    margin-right:5%; 
    margin-bottom:50px; 
    margin-left:5%; 
    float:left; 
} 
#media img 
{ 
    width:100%; 
    height:100%; 
}

脚本

 $('#media img:gt(0)').hide(); 
     setInterval(function() { 
      $('#media :first-child').fadeOut(4000) 
           .next('img') 
         .fadeIn(10) 
         .end() 
         .appendTo('#media'); 
     }, 4000); // 4 seconds 
    </script>

任何帮助将是巨大的。

谢谢你的帮助。

来源

2014-05-08 Jordan Ryan

问题是什么是什么呢？ –

要么我的照片不改变和/或褪色或所有三张照片出现，而不是只有一个，他们也不会改变。 –

这种类型的声音你没有正确链接jQuery库..你在哪里把代码引用jQuery，以及如何？另外，你有网站在线吗？如果我们对发生的事情有更全面的了解，帮助会容易得多。如果没有，请尝试将相关代码放入jsFiddle（http://jsfiddle.net）并链接到它。 –

使用jQuery你可以做到这一点。也许是这样的：

$(function() { 
    var images = $(".images img").hide(); 
    var current = 0; 
    setInterval(function() { 
     var next = ((current + 1) % images.length); 
     images.eq(current).fadeOut(); 
     images.eq(next).fadeIn(); 
     current = next; 
    }); 
});

然而，在你的CSS页面，你想也想补充一下：

.images 
{ 
    position: relative; 
} 
.images img 
{ 
    display: none; 
    position: absolute; 
}

，如果你想要一些淡出人们别人这是伟大的？

查看此页面，有使用jQuery一些其他的概念很相似：http://www.geeksucks.com/toolbox/23-jquery-fade-in-fade-out-effect.htm

来源

2014-05-08 02:16:40 tyler5819

这也只是一个问题，为什么你会使用.image（例如一个类）而不是#image（例如一个id）？ –

淡入淡出的图像简单的幻灯片javascript/html

回答

相关问题