我想在"$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运行不佳。