Cycle list
By Marcin Olejarz
This script provides cycle list which displays one element on the time. It repeats indefinitely.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<script src="js/jquery.min.js"></script>
<style>
ul#cycle {
width:200px;
position:relative;
overflow:hidden;
height:100px;
}
ul#cycle li {
font-size:1.4em;
padding:20px;
margin-left:-20px;
opacity:0;
position:absolute;
list-style:none;
}
div#top {
width:200px;
height:100px;
border:1px solid grey;
background:lightblue;
}
</style>
<script>
$(document).ready(function() {
var j = 0;
//time between cycles
var delay = 3000;
function cycle(){
var jmax = $("ul#cycle li").length -1;
$("ul#cycle li:eq(" + j + ")")
.animate({"opacity" : "1"} ,400)
.animate({"opacity" : "1"}, delay)
.animate({"opacity" : "0"}, 400, function(){
(j == jmax) ? j=0 : j++;
cycle();
});
};
cycle();
});
</script>
</head>
<body>
<div id="top">
<ul id="cycle">
<li>Position #1</li>
<li>Position #2</li>
<li>Position #3</li>
<li>Position #4</li>
</ul>
</div>
</body>
</html>