Как сделать так, чтобы слайдер фотогалереи с j-запросом хорошо играл с дубликатом слайдера?

Question

Во-первых, я очень новичок в j-запросе. При этом у меня есть очень простой слайдер фотогалереи с j-запросом, который удерживает изображения и превращается в новые каждые несколько секунд. У меня есть страница, где я продублировал ее и дал ей разные имена css и class / id в js для создания другого. Я хочу, чтобы оба на одной странице. Теперь, когда у меня есть второй и работает отлично. Это приводит к тому, что первый не работает, даже если они используют разные сценарии css, html и j-query

Вот весь код первого:

J-запрос:

<script type="text/javascript">

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
    setInterval('rotate()',10000);

}

function rotate() { 
    //Get the first image
    var current = ($('div#rotator ul li.show')?  $('div#rotator ul li.show') : $('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'));   

    //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();
});

</script>

HTML:

<div id="new_home_photo" class="round_10px">
    <div id="rotator">
        <ul>
            <li class="show">
                <a href="javascript:void(0)">
                    <div id="photo_1" class="round_7px">
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)">
                    <div id="photo_2" class="round_7px">
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)">
                    <div id="photo_3" class="round_7px">
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>

css:

/* rotator in-page placement */
div#rotator {position:relative;height:345px;margin-left:0px;}

/* rotator css */
div#rotator ul li {float:left;position:absolute;list-style:none;}

/* rotator image style */   
div#rotator ul li img {vertical-align:left;}

div#rotator ul li.show {z-index:500;}

#photo_1 {background:url(images/home_actual_1.jpg)no-repeat; width:621px;height:420px;}

#photo_2 {background:url(images/home_actual_2.jpg)no-repeat; width:621px;height:420px;}

#photo_3 {background:url(images/home_actual_3.jpg)no-repeat; width:621px;height:420px;}

Вот второй, который работает и заставил этот перестать работать:

J-запрос:

<script type="text/javascript">

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

    //Get the first image and display it (gets set to full opacity)
    $('div#rotator_update 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()',10000);

}

function rotate() { 
    //Get the first image
    var current = ($('div#rotator_update ul li.show_update')?  $('div#rotator_update ul li.show_update') : $('div#rotator_update 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_update')) ? $('div#rotator_update ul li:first') :current.next()) : $('div#rotator_update 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_update')
    .animate({opacity: 1.0}, 1000);

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

};

$(document).ready(function() {      
    //Load the slideshow
    theRotator();
});

</script>

HTML:

<div id="new_home_update">
    <div id="rotator_update">
        <ul>
            <li class="show_update">
                <a href="javascript:void(0)">
                    <div id="update_1" class="round_7px">
                <a href="http://www.prnewswire.com/news-releases/ptc-therapeutics-awarded-16-million-fda-orphan-drug-grant-to-support-an-ongoing-phase-3-study-in-cystic-fibrosis-103425769.html" target="_blank">
                PTC Therapeutics Awarded $1.6 Mil FDA Orphan Drug Grant to Support an Phase 3 Study in CF
                </a>
                </div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)">
                    <div id="update_2" class="round_7px">
                <a href="http://www.docguide.com/news/content.nsf/news/852576140048867C852577A4005BDB10" target="_blank">
                Denufosol Provides Significant Lung Function Improvement in Patients With Mild Cystic Fibrosis
                </a>
                </div>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)">
                    <div id="update_3" class="round_7px">
                <a href="http://www.news-medical.net/news/20100918/Researchers-identify-new-target-for-cystic-fibrosis.aspx" target="_blank">
                Researchers identify new target for cystic fibrosis
                <a/>
                </div>
                </a>
            </li>
        </ul>
    </div>
</div>

CSS:

div#rotator_update {position:relative;height:345px;margin-left:0px;}

/* rotator css */
div#rotator_update ul li {float:left;position:absolute;list-style:none;}

/* rotator image style */   
div#rotator_update ul li img {vertical-align:left;}

div#rotator_update ul li.show_update {z-index:500;}

#update_1 { width:621px;height:420px;margin:7px auto 7px 60px;}

#update_1 a {text-decoration:none; font-family:Arial,Helvetica, sans-serif; font-size:12px; color:#999999;text-align:center;}

#update_1 a:hover {color:#F16C22;}

#update_2 { width:621px;height:420px;margin:7px auto 7px 60px;}

#update_2 a {text-decoration:none; font-family:Arial,Helvetica, sans-serif; font-size:12px; color:#999999;text-align:center;}

#update_2 a:hover {color:#F16C22;}

#update_3 { width:621px;height:420px;margin:7px auto 7px 60px;}

#update_3 a {text-decoration:none; font-family:Arial,Helvetica, sans-serif; font-size:12px; color:#999999;text-align:center;}

#update_3 a:hover {color:#F16C22;}

Я также пробовал много комбинаций переименования классов и классов общего доступа, и ничто не заставляло их работать одновременно.

Заранее большое спасибо!

Answer 1

Проблема заключается в том, что ваши функции по-прежнему имеют одинаковые имена (т. Е. theRotator и rotate появляются на странице дважды), что является причиной проблемы.

Лучшим решением будет изменить вашМетоды theRotator и rotate, чтобы вы могли передать идентификатор того слайд-шоу, которое вы хотите повернуть.Что-то вроде:

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

    //Get the first image and display it (gets set to full opacity)
    $('div#' + sliderId + ' 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(' + sliderId + ')',10000);
}

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

    ...
};

$(document).ready(function() {      
    //Load the slideshows
    theRotator('rotator');
    theRotator('rotator_update');
});