調用相同的函數兩次 - 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

你的函數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'); 

例如

Answer 2

你必須與你的滑塊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); 
}