kcp_808,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.right{float:right;margin-top:20px;background:#F00;color:#FF3;padding:12px;border-radius:5px;cursor:pointer}
.left{float:left;margin-top:20px;background:#00F;color:#FF3;padding:12px;border-radius:5px;cursor:pointer}
.no{
opacity: 0.2;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var b = $(".right"),
c = $(".left");
b.add(c).on("click", function() {
var a = $(this).is(".right"),
a = a ? b.index(this) + 1 : c.index(this) - 1;
0 > a && (a = 0);
a > b.length - 1 && (a = b.length - 1);
b.hide().toggleClass("no", a == b.length - 1).eq(a).show();
c.hide().toggleClass("no", !a).eq(a).show()
}).end().last().click()
});
</script>
</head>
<body> <div class="list1">
<div class="left">л1</div>
</div>
<div class="list2">
<div class="right">п2</div>
</div>
<div class="list3">
<div class="left">л3</div>
</div>
<div class="list4">
<div class="right">п4</div>
</div>
<div class="list5">
<div class="left">л5</div>
</div>
<div class="list6">
<div class="right">п6</div>
</div>
</body>
</html>