使用 jquery淡入淡出一系列 png我页面上的图像。效果很好(下面的代码)!但是,我想在同一页上的一个新表格单元格内创建第二组完全不同的褪色图像,但我无法同时使两者发挥作用。我认为这很简单,但我是一名新编码员,并且尝试了多种选择但无济于事。我对单组褪色图像的成功代码如下...我需要什么才能在表格单元格内重新创建类似的东西?
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 4000);
});
.fadein { position:absolute; left:5; top:0; }
.fadein img { position:absolute; left:0; top:0; }
.fadelinks, .faderandom { position:absolute; }
.fadelinks > *, .faderandom > * { position:absolute; }
.multipleslides { position:relative; height:563px; width:550px; float:left; }
.multipleslides > * { position:absolute; left:0; top:0; display:block; }
<head>
<img src="map.png" width="1334" height="786" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="80,604,94,654,300,599,286,550" href="doit.html" />
<area shape="poly" coords="60,535,76,590,347,516,335,461" href="http://WhiteboardCreative.net/" />
<area shape="poly" coords="43,460,57,519,401,429,384,368" href="whoweart.html" />
</map>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<h1>
<div class="fadein"; align="left">
<img src="notes active/notes1.png" />
<img src="notes active/notes4.png" />
<img src="notes active/notes3.png" />
<img src="notes active/notes2.png" />
<img src="notes active/notes5.png" />
<img src="notes active/notes7.png" />
<img src="notes active/notes8.png" />
<img src="notes active/notes9.png" />
<img src="notes active/notes10.png" /></div>
</div>
<h2>
</body>
最佳答案
简单地定位 .each()
包装器 .fadein
父集:
$(".fadein").each(function(){
// Now use `$(this)` to reference to the .fadein
$(this).find('img:gt(0)').hide();
setInterval(function(){
$(this).find('img:first-child').fadeOut().next('img').fadeIn().end().appendTo( this );
}, 4000);
});
关于jquery - 同一个 XHTML 页面上的多个 Jquery 淡入淡出图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32898533/