对于了解 JS 的人来说应该是一个简单的问题。
我有一个网页,页脚中有 4 个旋转的图像。
<div class="column_w190 fl margin_right_40">
<!-- START: Rotating Images -->
<div id="rotating-item-wrapper">
<img src="images/Rotating/greenpeople.jpg" alt="image" class="rotating-item" width="175" height="175" />
<img src="images/Rotating/entrance.jpg" alt="image" class="rotating-item" width="175" height="175" />
<img src="images/Rotating/bluepeople.jpg" alt="image" class="rotating-item" width="175" height="175" />
<img src="images/Rotating/reflection3.jpg" alt="image" class="rotating-item" width="175" height="175" />
<img src="images/Rotating/reflection2.jpg" alt="image" class="rotating-item" width="175" height="175" />
<img src="images/Rotating/manequine.jpg" alt="image" class="rotating-item" width="175" height="175" />
</div><!-- END: Rotating images images -->
<p>Straffen Toebak</p>
</div>
我在网上找到的脚本中定义了 rotating-item 的地方:
$(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 = 2000;
//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();
});
问题是,当我添加第二列也应该有旋转图像时,第二列中的图像现在会依次显示,即它将显示 left:1, left:2, left3, left4, left5, left6 , right1, right2 而不是 左 1 + 右 1,左 2 + 右 2。
所以我猜你不能将右侧的图像添加到同一个类“rotating-item”,但我不知道在 JS 中如何启动该类的新实例。
最佳答案
表达式 $('.rotating-item')
从 DOM 中抓取所有具有 class="rotating-item"
的 HTML 元素,顺序与它在 DOM 中的显示顺序相同页面顶部向下,它并不关心它们在不同的列中。
我想,您需要两个带有旋转(过渡)图像的 DIV。我认为可以这样解决:
/* your JavaScript */
function rotateImages (container) // CONTAINER -- WHERE IT SHALL ROTATE IMAGES
{
var initialFadeIn = 1000; // in miliseconds
var itemInterval = 2000; // in miliseconds
var fadeTime = 2500; // in miliseconds
var currentItem = 0; //set current item
// WE FIND ALL IMAGES IN THE CONTAINER
// NO FURTHER NEED FOR class="rotating-item"
var images = container.find('img');
// HIDE ALL IMAGES
images.hide()
// show first item
images.eq(currentItem).fadeIn(initialFadeIn);
// loop through the items
// TIMER ID IS RETURNED FROM THIS FUNCTION,
// SO YOU CAN TERMINATE ROTATING IN FUTURE
return setInterval(function(){
images.eq(currentItem).fadeOut(fadeTime);
if(currentItem === images.length -1)
currentItem = 0;
else
currentItem++;
images.eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
然后你为每一列设置唯一的id
,你想在其中旋转图像,例如:
<!-- your HTML -->
<div id="rotating-item-wrapper-ONE">
<!-- the img elements does not need to have special class,
it will rotate all img in this div -->
<img ...></img>
<img ...></img>
</div>
<div id="rotating-item-wrapper-TWO">
<img ...></img>
<img ...></img>
...
</div>
最后,您在 JavaScript 中使用 jQuery 选择器分别为每一列启动旋转器以获取它们的 ID:
/* your JavaScript */
var col1 = $('#rotating-item-wrapper-ONE')
var col2 = $('#rotating-item-wrapper-TWO')
var timer1 = rotateImages(col1);
var timer2 = rotateImages(col2);
然后您可以调用 clearInterval()
来停止旋转,即:
/* your JavaScript */
// as a result of some action
clearInterval(timer1) // stops rotating in col1
关于javascript - 在 JavaScript 中旋转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29632425/