单页上具有多个实例的 jQuery 图像旋转器

Question

美好的一天，

我已经搜索和研究了这个问题 12 个小时，但找不到解决我的问题的方法。因为我不太了解 Javascript 和 jQuery，所以我不太确定要寻找和搜索什么。

我已经在我的网站上实现了这个 jQuery 图像旋转器成功并且它与在页面上工作的旋转器实例一起出色地工作。现在，我想知道是否可以让多个旋转器同时在单个页面上工作。

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

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

Answer 1

从目前的实施来看，没有。旋转器代码显式地对与 div#rotator 匹配的内容进行操作，其中应该最多是一个元素。

执行类似以下操作即可解决问题 - 传递包含 ul 的 div 的 id。

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> );
    ...
});