在一个html页面上显示多个幻灯片

Question

我试图将两个侧面节目放在一个页面上，我无法让第二个节目工作，我尝试了多次在网上找到的修复，但没有一个能够工作并使其变得更糟。这是我的代码

$(document).ready(function()

// execute the slideShow, set 4 seconds (4000) for each image
slideShow(6000);

});

function slideShow(speed) {

  // append an 'li' item to the 'ul' list for displaying the caption
  $('ul.images').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><p></p></div></li>');

  // set the opacity of all images to 0
  $('ul.images li').css({opacity: 0.0});

  // get the first image and display it
  $('ul.images li:first').css({opacity: 1.0}).addClass('show');

  // call the gallery function to run the slideshow  
  var timer = setInterval('gallery()',speed);

  // pause the slideshow on mouse over
  $('ul.images').hover(
function () {
  clearInterval(timer); 
},  
function () {
  timer = setInterval('gallery()',speed);     
}
  );  
}

function gallery() {

  //if no images have the show class, grab the first image
  var current = ($('ul.images li.show')?  $('ul.images li.show') : $('#ul.images li:first'));

  // trying to avoid speed issue
  if(current.queue('fx').length == 0) {

    // get the next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')?     $('ul.images li:first') :current.next()) : $('ul.images li:first'));

// get the next image caption
var desc = next.find('img').attr('alt');  

// set the fade in effect for the next image, 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');

  }
}

function slideShow(speed) {

  // append an 'li' item to the 'ul' list for displaying the caption
  $('ul.images1').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><p></p></div></li>');

  // set the opacity of all images to 0
  $('ul.images1 li').css({opacity: 0.0});

  // get the first image and display it
  $('ul.images1 li:first').css({opacity: 1.0}).addClass('show');

  // call the gallery function to run the slideshow  
  var timer = setInterval('gallery2()',speed);

  // pause the slideshow on mouse over
  $('ul.images1').hover(
    function () {
  clearInterval(timer); 
},  
function () {
  timer = setInterval('gallery2()',speed);     
}
  );  
}

function gallery2() {

  //if no images have the show class, grab the first image
  var current = ($('ul.images1 li.show')?  $('ul.images1 li.show') : $('#ul.images1 li:first'));

  // trying to avoid speed issue
  if(current.queue('fx').length == 0) {

    // get the next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')?$('ul.images1 li:first') :current.next()) : $('ul.images1 li:first'));

    // get the next image caption
    var desc = next.find('img').attr('alt');  

    // set the fade in effect for the next image, 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');

  }
}

这是我的HTML

第一个画廊

<div class="gallery">
    <ul class="images1">
        <li class="show"><img width="880" height="100" src="images\imageedit_6_7692684616.gif" alt="photo1" /></li>
        <li><img width="880" height="100" src="images\imageedit_20_2328314159.gif" alt="photo2" /></li>
    </ul>
</div> 

这是第二个画廊

<div class="gallery2">
    <ul class="images">
        <li class="show"><img width="930" height="400" src="images/offshore banner pic writing.png" alt="photo_one" /></li>
        <li><img width="930" height="400" src="images/Drillig Pipe travels under the sea writing.jpg" alt="photo_two" /></li>
        <li><img width="930" height="400" src="images/shutterstock_71875879_writing.jpg" alt="photo_three" /></li>
        <li><img width="930" height="400" src="images/shutterstock_92549716_writing.jpg" alt="photo_four" /></li>
        <li><img width="930" height="400" src="images/shutterstock_64614868_writing.jpg" alt="photo_five" /></li>
    </ul>
</div>