如何使用Javascript创建文本滑块

I want to realize a text slider like this:

我想实现一个像这样的文本滑块:

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

There are arrows that will bring you to the next or previous page. I notice that when you click to arrow, the page is same. How can I make that?

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

1 个解决方案

#1

A simple way of doing that is creating multiple divs, make all display: none and use Javascript to control the buttons and show/hide divs based on where you are. For example, use the following javascript:

一个简单的方法是创建多个div,使所有显示: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();
});

I created a jsfiddle so you can see the effect. Basically I have 3 divs with different content, and I switch the content by hiding and displaying the divs depending on what 'page' you are on. This does require jQuery. Using this example that I made, you will not be able to navigate to not existing pages.

我创建了一个jsfiddle,你可以看到效果。基本上我有3个不同内容的div,我通过隐藏和显示div来切换内容,具体取决于你所在的“页面”。这确实需要jQuery。使用我所做的这个示例,您将无法导航到不存在的页面。