幻灯片图像自动地和手动

用于图像滑块我使用此代码幻灯片图像自动地和手动

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

幻灯片图像自动地和手动

回答

相关问题