JavaScript图像的响应图像淡入淡出

时间:2015-11-20 15:16:04

标签: javascript html css

我想在"$5672.40"响应内部生成图像,而淡化图像的JavaScript代码正在运行。

HTML:

div

CSS:

<div id="rotating-item-wrapper">
    <img class="rotating-item" src="http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-284a.jpg" />
    <img class="rotating-item" src="http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-263a.jpg" />
</div>

JavaScript的:

#rotating-item-wrapper {
    position: absolute;
    top: 10%;
    left: 19%;
}
.rotating-item {
    position: absolute;
}

我尝试使用$(window).load(function () { //start after HTML, images have loaded var InfiniteRotator = { init: function () { //initial fade-in time (in milliseconds) var initialFadeIn = 1000; //interval between items (in milliseconds) var itemInterval = 3000; //cross-fade time (in milliseconds) var fadeTime = 2500; //count number of items var numberOfItems = $('.rotating-item').length; //set current item var currentItem = 0; //show first item $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn); //loop through the items var infiniteLoop = setInterval(function () { $('.rotating-item').eq(currentItem).fadeOut(fadeTime); if (currentItem == numberOfItems - 1) { currentItem = 0; } else { currentItem++; } $('.rotating-item').eq(currentItem).fadeIn(fadeTime); }, itemInterval); } }; InfiniteRotator.init(); }); ,但js运行不佳。

0 个答案:

没有答案