Javascript 如何使j-query照片库滑块与复制滑块配合使用？

首先，我对j-query非常陌生。话虽如此，我有一个非常简单的j-query照片库滑块，它可以保存图像并每隔几秒钟淡入新图像。我有一个页面，我复制了它，并在js中为它指定了不同的css和class/id名称，以创建一个不同的页面。我希望两者都在同一页上。现在我有了第二个，并且运行得很好。这导致第一个脚本无法工作，即使它们共享不同的css、html和j-query脚本

以下是第一个的所有代码：

j-query：

<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>

<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>

这是第二个正在工作，导致第一个停止工作：

j-query：

<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>

<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>

我还尝试了许多重命名类和共享类的组合，但没有任何东西使它们同时工作

---

非常感谢

问题在于，您的函数名称仍然相同（即，

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

---

谢谢这完全奏效了。我在正确的路径上，但没有尝试更改旋转（）。祝你过得愉快。

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

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