Я столкнулся с проблемой, что я не могу настроить JQuery rotator из
Easy JQuery Auto Image Rotator и источник скриптов Google jquery.min.js

Я дал второй галерее другой класс и удвоил js-скрипт.
Затем я заменил все имена классов и селекторов второй галереей.
Но тогда работает только одна из галерей, и я хотел бы иметь решение, которое охватывает
обе галереи с функцией.

Также я попытался использовать только одну функцию и поместить оба div id в секции (id)
→ Не работает. Теперь оба слоя расположены друг над другом, и я не могу их переместить
давая им float: left и float: right.

Я очень благодарен за вашу помощь.

Заранее спасибо.

Это divs:

<div class="rotator">
  <ul>
    <li class="show"><img src="img/screenshots/screen1-big.jpg" alt="pic1" /></li>
    <li><img src="img/screenshots/screen2-big.jpg" alt="pic2" /></li>
    <li><img src="img/screenshots/screen3-big.jpg" alt="pic3" /></li>
    <li><img src="img/screenshots/screen4-big.jpg" alt="pic4" /></li>
  </ul>
</div>  
</div>
<div class="wrapper">
<div class="gallery">
  <ul>
    <li class="take"><img src="img/screenshots/screen3.jpg" alt="pic1" /></li>
    <li><img src="img/screenshots/screen2.jpg" alt="pic2" /></li>
    <li><img src="img/screenshots/screen4.jpg" alt="pic3" /></li>
    <li><img src="img/screenshots/screen1.jpg" alt="pic4" /></li>
  </ul>
</div>  


</div>

Это классы div

/* rotator in-page placement */
div.rotator {display:none; float:left; width: 451px;}
/* rotator css */
div.rotator ul { margin:0; padding:0;}
div.rotator ul li { position:absolute; list-style: none;}
/* rotator image style */   
div.rotator ul li img {width:451px; height: 313px;}
div.rotator ul li.show {z-index:500;}

div.gallery {display:none; float:right; width: 451px;}
/* rotator css */
div.gallery ul { margin:0; padding:0;}
div.gallery ul li { position:absolute; list-style: none;}
/* rotator image style */   
div.gallery ul li img {width:451px; height:313px;}
div.gallery ul li.take {z-index:500;}

Функция 1 для деления ротатора

    function theRotator() {
        //Set the opacity of all images to 0
        $('div.rotator ul li').css({opacity: 0.0});

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

        //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds

        if ($('div.rotator ul li').length > 1) {
        setTimeout('rotate()', 6000);
    }
    }

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

        if (current.length == 0 ) current = $('div.rotator 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')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));

        //Un-comment the 3 lines below to get the images in random order

        //var sibs = current.siblings();
            //var rndNum = Math.floor(Math.random() * sibs.length );
            //var next = $( sibs[ rndNum ] );


        //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, function(){setTimeout('rotate()', 6000);}) .removeClass('show');

    };

    $(document).ready(function() {      
        //Load the slideshow
        theRotator();
        $('div.rotator').fadeIn(1000);
            $('div.rotator ul li').fadeIn(1000); // tweek for IE
    });

Функция 2 для галереи div

function theGalley() {
        //Set the opacity of all images to 0
        $('div.gallery ul li').css({opacity: 0.0});

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

        //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds

        if ($('div.gallery ul li').length > 1) {
        setTimeout('rotate()', 6000);
    }
    }

    function rotate() { 
        //Get the first image
        var current = ($('div.gallery ul li.take')? $('div.gallery ul li.take') : $('div.gallery ul li:first'));

        if (current.length == 0 ) current = $('div.gallery 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('take')) ? $('div.gallery ul li:first') :current.next()) : $('div.gallery ul li:first'));

        //Un-comment the 3 lines below to get the images in random order

        //var sibs = current.siblings();
            //var rndNum = Math.floor(Math.random() * sibs.length );
            //var next = $( sibs[ rndNum ] );


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

        //Hide the current image
        current.animate({opacity: 0.0}, 1000, function(){setTimeout('rotate()', 6000);}) .removeClass('take');

    };

    $(document).ready(function() {      
        //Load the slideshow
        theGallery();
        $('div.gallery').fadeIn(1000);
            $('div.gallery ul li').fadeIn(1000); // tweek for IE
    });