两次调用同一函数-JavaScript

Question

我面临两次使用相同JavaScript代码的问题。 两个滑块冲突，并且无法正常工作。 我想知道为什么这行不通。 当我仅使用一个滑块时，它可以正常工作。 这是JavaScript代码：

 sliderInt = 1; sliderNext = 2; $(document).ready(function() { $('#slider > img#1').fadeIn(150); startSlider(); }) function startSlider() { var count = $('#slider > img').size(); var loop = setInterval(function() { if (sliderNext > count) { sliderInt = 1; sliderNext = 1; } $('#slider > img').fadeOut(150); $('#slider > img#' + sliderNext).fadeIn(150); sliderInt = sliderNext; sliderNext = sliderNext + 1; }, 3000); } function prev() { newSlide = sliderInt - 1; showSlide(newSlide); } function next() { newSlide = sliderInt + 1; showSlide(newSlide); } function stopLoop() { window.clearInterval(loop); } function showSlide(id) { stopLoop(); if (id > count) { id = 1; } else if (id < 1) { id = count; } $('#slider > img').fadeOut(150); $('#slider > img#' + id).fadeIn(150); sliderInt = id; sliderNext = id + 1; startSlider(); } $('#slider > img').hover( function() { stopLoop(); }, function() { startSlider(); } // In the End of the line don't put comma ',' ); sliderInt = 1; sliderNext = 2; $(document).ready(function() { $('#pslider > img#1').fadeIn(150); startSlider(); }) function startSlider() { var count = $('#pslider > img').size(); var loop = setInterval(function() { if (sliderNext > count) { sliderInt = 1; sliderNext = 1; } $('#pslider > img').fadeOut(150); $('#pslider > img#' + sliderNext).fadeIn(150); sliderInt = sliderNext; sliderNext = sliderNext + 1; }, 3000); } function fprev() { newSlide = sliderInt - 1; showSlide(newSlide); } function fnext() { newSlide = sliderInt + 1; showSlide(newSlide); } function stopLoop() { window.clearInterval(loop); } function showSlide(id) { stopLoop(); if (id > count) { id = 1; } else if (id < 1) { id = count; } $('#pslider > img').fadeOut(150); $('#pslider > img#' + id).fadeIn(150); sliderInt = id; sliderNext = id + 1; startSlider(); } $('#pslider > img').hover( function() { stopLoop(); }, function() { startSlider(); } //In the End of the line don 't put comma ', ' ); 

 <div class="primary_slider"> <div id="slider"> <img id="1" src="images/slider_images/image1.jpg" alt=""> <img id="2" src="images/slider_images/image2.jpg" alt=""> <img id="3" src="images/slider_images/image3.jpg" alt=""> </div> <a class="prev" href="#" onclick="prev(); return false;"></a> <a class="next" href="#" onclick="next(); return false;"></a> </div> <div class="footer_slider"> <div id="pslider"> <img id="1" src="images/pslider/para_img1.jpg"> <img id="2" src="images/pslider/para_img.png"> <img id="3" src="images/pslider/para_img2.jpg"> </div> <a class="fprev" href="#" onclick="fprev(); return false"> <</a> <a class="fnext" href="#" onclick="fnext(); return false">></a> </div> 

Answer 1

您在使用滑块id时遇到麻烦。 http://www.w3schools.com/tags/att_global_id.asp

您可以尝试使用类

<div class="primary_slider">
  <div class="slider">
    <img id="1" src="images/slider_images/image1.jpg" alt="">
    <img id="2" src="images/slider_images/image2.jpg" alt="">
    <img id="3" src="images/slider_images/image3.jpg" alt="">
  </div>
  <a class="prev" href="#" onclick="prev(); return false;"><</a>
  <a class="next" href="#" onclick="next(); return false;">></a>
</div>

<div class="footer_slider">
  <div class="slider">
    <img id="4" src="images/pslider/para_img1.jpg">
    <img id="5" src="images/pslider/para_img.png">
    <img id="6" src="images/pslider/para_img2.jpg">
  </div>
  <a class="prev" href="#" onclick="prev(); return false">
    <</a>
      <a class="next" href="#" onclick="next(); return false">></a>
</div>

---

sliderInt = 1;
sliderNext = 2;

$(document).ready(function() {
  $('#slider > img#1').fadeIn(150);
  startSlider();
})

function startSlider() {

  var count = $('.slider > img').size();

  var loop = setInterval(function() {

    if (sliderNext > count) {
      sliderInt = 1;
      sliderNext = 1;
    }

    $('.slider > img').fadeOut(150);
    $('.slider > img#' + sliderNext).fadeIn(150);

    sliderInt = sliderNext;
    sliderNext = sliderNext + 1;
  }, 3000);

}

function prev() {
  newSlide = sliderInt - 1;
  showSlide(newSlide);
}

function next() {
  newSlide = sliderInt + 1;
  showSlide(newSlide);
}

Answer 2

您的函数StartSlider基于ID为“ #slider”的dom元素，您应该将滑块的ID作为参数传递给函数

function startSlider(id) {
  var count = $('#" + id + "> img').size(),
      loop = setInterval(function() {
        if (sliderNext > count) {
          sliderInt = 1;
          sliderNext = 1;
        }

        $('#" + id + "> img').fadeOut(150);
        $('#" + id + "> img#' + sliderNext).fadeIn(150);

        sliderInt = sliderNext;
        sliderNext = sliderNext + 1;
      }, 3000);
}

并称之为

startSlider('pslider');

例如