AnDit,
взято
тут
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.blocktxt ul{
display: none;
}
.blocktxt ul.active{
display: block;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".blocktxt"), function(item) {
var btn_prev = item.querySelector(".prev");
var btn_next = item.querySelector(".next");
var ul = item.querySelectorAll("ul");
var len = ul.length - 1;
var i = 0;
function cleanout() {
ul[i].classList.remove("active")
}
function addcls() {
ul[i].classList.add("active")
}
function limit() {
i < 0 && (i = len);
i > len && (i = 0)
}
btn_prev.addEventListener("click", function() {
cleanout();
i--;
limit();
addcls()
});
btn_next.addEventListener("click", function() {
cleanout();
i++;
limit();
addcls()
});
})
});
</script>
</head>
<body>
<div class="blocktxt"><div class="prev">предыдущий</div>
<div class="txt" id="scroll">
<ul class="active">
<li>
<p>текст1</p>
</li><br>
</ul>
<ul>
<li>
<p>текст2</p>
</li><br>
</ul>
<ul>
<li>
<p>текст3</p>
</li><br>
</ul>
</div>
<div class="next">следующий</div>
</div>
</body>
</html>