javascript - 如何使用 Javascript 创建文本 slider

Question

我想实现这样一个文本 slider :

http://www.federica.unina.it/ingegneria/ingegneria-del-software-ingegneria/progettazione-qualita-software/

有箭头可以将您带到下一页或上一页。我注意到当您单击箭头时，页面是相同的。我该怎么做？

Answer 1

一个简单的方法是创建多个 div，使所有显示:无并使用 Javascript 控制按钮并根据您所在的位置显示/隐藏 div。例如，使用以下 javascript:

var page = 1;

$('#next').click( function() {
    $('#' + page).hide();
    page = page + 1;
    $('#' + page).show();
});

$('#previous').click( function() {
    $('#' + page).hide();
    page = page - 1;
    $('#' + page).show();
});

我创建了 a jsfiddle这样你就可以看到效果了。基本上我有 3 个内容不同的 div，我根据你所在的“页面”通过隐藏和显示 div 来切换内容。这确实需要 jQuery。使用 this example我所做的，您将无法导航到不存在的页面。