javascript - 如何使 j-query 照片库 slider 与重复 slider 配合得很好？

Question

首先，我是 j-query 的新手。也就是说，我有一个非常简单的 j-query 照片库 slider ，它可以保存图像并每隔几秒淡入新图像。我有一个页面，我复制了它，并在 js 中给它不同的 css 和类/id 名称来制作一个不同的。我希望两者都在同一页上。现在我已经启动并完美运行了第二个。这导致第一个无法工作，即使它们共享不同的 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 方法，以便您可以传入要旋转的任何幻灯片的 ID。像这样的东西:

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