如何使用Javascript创建文本滑块

Question

我想要实现这样的文本滑块：

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

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

Answer 1

这样做的一个简单方法是创建多个div，make all display：none并使用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，您将无法导航到不存在的网页。