0

再会，

在过去的 12 个小时里，我已经对此进行了搜索和研究，但找不到解决我问题的方法。而且因为我对 Javascript 和 jQuery 不太了解，所以我不确定要查找和搜索什么。

我已经在我的网站上成功地实现了这个jQuery Image Rotator，并且它与一个页面上的旋转器实例一起工作得很好。现在，我想知道是否有可能让多个旋转器同时在一个页面上工作。

到目前为止，我的努力还没有成功。两个旋转器将正确加载，但第一个旋转器的第一个图像将开始播放。然后，将切换到第二个旋转器并继续旋转那个，而第一个是空白的。

对此的任何帮助和指导将不胜感激。

4

1 回答 1

2

由于它目前正在实施，没有。rotator 代码显式地对 match 的内容进行操作， matchdiv#rotator最多应该是一个元素。

执行以下操作可以解决问题 - 传入id包含ul.

function theRotator( id ) {
    //Set the opacity of all images to 0
    var jqElem = $( '#' + id );
    jqElem.find('ul li').css({opacity: 0.0});

    //Get the first image and display it (gets set to full opacity)
    jqElem.find('ul li:first').css({opacity: 1.0});

    //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval(rotate,6000);

    function rotate() { 
        //Get the first image
        var current = (jqElem.find('ul li.show')?  jqElem.find('ul li.show') : jqElem.find('ul li:first'));

        //Get next image, when it reaches the end, rotate it back to the first image
        var next = ((current.next().length) ? ((current.next().hasClass('show')) ? jqElem.find('ul li:first') :current.next()) : jqElem.find('ul li:first'));   

        //Set the fade in effect for the next image, the show class has higher z-index
        next.css({opacity: 0.0})
        .addClass('show')
        .animate({opacity: 1.0}, 1000);

        //Hide the current image
        current.animate({opacity: 0.0}, 1000)
        .removeClass('show');

    };

}


$(document).ready(function() {      
    //Load the slideshow
    theRotator( <id of rotator container 1> );
    theRotator( <id of rotator container 2> );
    ...
});
于 2011-10-19T08:52:23.167 回答