幻燈片圖像自動地和手動

用於圖像滑塊我使用此代碼幻燈片圖像自動地和手動

var sliderIndex = 0; 
 

 
function initializeImageSlider() { 
 
    var sliderImages = $(".sliderImg"); 
 

 
    for (var i = 0; i < sliderImages.length; i++) { 
 
     sliderImages[i].style.display = "none"; 
 
    } 
 
    sliderIndex++; 
 
    if (sliderIndex > sliderImages.length) { 
 
     sliderIndex = 1; 
 
    } 
 
    sliderImages[sliderIndex-1].style.display = "block"; 
 
    setTimeout(initializeImageSlider, 5000); 
 
} 
 

 
function changeSliderImage(direction) { 
 
    sliderIndex += direction; 
 
    alert("move " + direction); 
 
}

#containerImageSlider { 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.sliderImg{ 
 
    width: 100%; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body onLoad="initializeImageSlider()"> 
 

 
<button onclick="changeSliderImage(-1)">-</button> 
 
<div id="containerImageSlider"> 
 
    <img class="sliderImg" src="Resources/sliderImg1.png"> 
 
    <img class="sliderImg" src="Resources/sliderImg2.png"> 
 
    <img class="sliderImg" src="Resources/sliderImg3.png"> 
 
    <img class="sliderImg" src="Resources/sliderImg4.png"> 
 
    <img class="sliderImg" src="Resources/sliderImg5.png"> 
 
</div> 
 
<button onclick="changeSliderImage(1)">+</button> 
 

 
</body>

所以滑塊自動工作正常。現在我添加了兩個按鈕，它們調用函數changeSliderImage(direction)，在那裏我傳遞一個向前或向後移動的值。

正如您所看到的，目前我只使用initializeImageSlider()函數來具有自動滑塊。

如何創建一個函數，讓這個自動和手動過程起作用？

我不明白，如何分割我的initializeImageSlider()函數。

來源

2017-08-14 peterHasemann

這裏是一個[jsbin（http://jsbin.com/pigarilugo/edit?html,output），將做完全，如果你想要我將在下面添加它作爲答案。 – nivas

您可以創建一個功能updateImageSlider()，該功能只更新滑塊，是否增加或減少sliderIndex。然後，每當倒計時達到5秒或用戶單擊按鈕時，您就簡單地調用此方法。

此代碼應該做你想要什麼：

var sliderIndex = 0; 

function updateImageSlider() { 
    var sliderImages = $(".sliderImg"); 

    for (var i = 0; i < sliderImages.length; i++) { 
     sliderImages[i].style.display = "none"; 
    } 
    if (sliderIndex > sliderImages.length) { 
     sliderIndex = 1; 
    } 
    else if (sliderIndex < 1) { 
     sliderIndex = sliderImages.length; 
    } 
    sliderImages[sliderIndex-1].style.display = "block"; 
} 

var autoSlideHandler; // To reset the timer 
function incrementImageSlider() { 
    sliderIndex++; 
    updateImageSlider(); 
    autoSlideHandler = setTimeout(incrementImageSlider, 5000); 
} 

function changeSliderImage(direction) { 
    // Move the slider 
    sliderIndex += direction; 
    updateImageSlider(); 
    alert("move " + direction); 
    // Reset the timer 
    clearTimeout(autoSlideHandler); 
    autoSlideHandler = setTimeout(incrementImageSlider, 5000); 
} 

$(incrementImageSlider); // Initialize the slider, function called on page load

來源

2017-08-14 09:38:59

幻燈片圖像自動地和手動

回答

相關問題