Moloch,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.clicked {
display: inline-block;
background-image: -webkit-gradient(linear, left, right, color-stop(0, #5CC3FF), color-stop(1, #0060BF));
background-image: -o-linear-gradient(left, #5CC3FF, #0060BF);
background-image: -moz-linear-gradient(left, #5CC3FF, #0060BF);
background-image: -webkit-linear-gradient(left, #5CC3FF, #0060BF);
background-image: linear-gradient(to right, #5CC3FF, #0060BF)
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var spisok = $("#spisok li");
var opredelenie = $("#opredelenie li");
var length = spisok.length;
var polzun = $("#polzun");
var index = 0;
polzun.attr({
"max": length - 1,
"min": 0
}).val(index);
function show() {
spisok.removeClass("clicked").eq(index).addClass("clicked");
opredelenie.hide().eq(index).show();
polzun.val(index)
}
polzun.on("change", function() {
index = $(this).val();
show()
}).trigger("change");
spisok.on("click", function() {
index = spisok.index(this);
show()
});
$("#next, #prev").on("click", function() {
this.id == "prev" ? index-- : index++;
index == length && (index = 0);
index < 0 && (index = length - 1);
show()
})
});
</script>
</head>
<body>
<input id='polzun'type="range" name="quantity">
<h3>Определение</h3>
<ul id ="spisok">
<li >Строители</li>
<li >Слон</li>
<li >Соседи</li>
<li >Рояль</li>
<li >Рукокрылая свинья</li>
</ul>
<h3>Пояснение</h3>
<ul id ="opredelenie">
<li> <span>Курили бетон</span> </li>
<li ><span>Сильный он</span></li>
<li ><span>Клопы и медведи</span></li>
<li ><span>Украли через форточку</span></li>
<li ><span>Уселась на жордочку</span></li>
</ul>
<button id="prev">Назад</button>
<button id="next">Вперед</button>
</body>
</html>