Javascript Basic Slider

Javascript Basic Slider

本文关键字：Slider Basic Javascript      更新时间：2023-09-26

基本上，我对Javascript没有任何经验。

我必须制作一个非常简单的图像滑块，但我无法让它自动显示下一个图像。 

var currentItem = $('#project-list li').first();
function showNextSlide()
{
    if(currentItem.length == 0){
        currentItem = $('#project-list li').first();
    }
    console.log(currentItem);
    currentItem.css('display', 'none');
    currentItem = currentItem.next();
    currentItem.css('display', 'block');
}

我的图像是这样加载的 

<ul class="project-list" id="project-list">
    <li class="project current slide-1">
        <img src="http://lorempixel.com/600/300/animals/1" />
    </li>
    <li class="project slide-2">
        <img src="http://lorempixel.com/600/300/animals/2" />
    </li>
    <li class="project slide-3">
        <img src="http://lorempixel.com/600/300/animals/3" />
    </li>
    <li class="project slide-4">
        <img src="http://lorempixel.com/600/300/animals/4" />
    </li>
</ul>

感谢任何帮助！

如果你想有自动幻灯片，你可以很容易地使用，setInterval()方法：

setInterval(function(){
    showNextSlide(); 
}, 2000);
相关文章：