Question

美好的一天，

我在过去12小时内搜索并研究了这个问题，无法找到解决问题的方法。而且因为我对Javascript和jQuery没有太多了解，我不确定该寻找什么和搜索。

我已经成功地在我的网站上实现了这个jQuery Image Rotator，并且它在一个页面上工作的一个旋转器实例非常出色。现在，我想知道是否有可能同时在一个页面上运行多个旋转器。

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

对此的任何帮助和指示都将非常感激。

Answer 1

目前正在实施，没有。旋转器代码显式地操作匹配div#rotator的内容，其中应该最多只有一个元素。

执行以下操作即可实现 - 传递包含id的div的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> );
    ...
});

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

1 个答案: