Cycle Through a List

For example, Cycle Through a List...

Demo

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
  • At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque

HTML

<ul id="cyclelist">
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque </li>
        <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque </li>
</ul>

CSS

<style>
        #cyclelist { 
                background-color: #037cd5; 
                color:#FFF; 
                width:200px; 
                height:200px; 
                position:relative; 
                overflow:hidden; 
                padding-left:0; /* Demo purposes only */ 
        }
        #cyclelist li { 
                font-size:15px; 
                line-height:1.5em; 
                padding:20px; 
                position:absolute; 
                opacity:0;
                list-style:none; /* Demo purposes only */ 
        }
</style>

Javascript

// Cycle Through a List
$(function(){
    var z = 0;
    var delay = 2000; // delay between cycles list items
    function cycle(){
            var cyclelSlides = $("#cyclelist li").length -1;
            $("#cyclelist li:eq(" + z + ")")
                    .animate({"opacity" : "1"} ,400)
                    .animate({"opacity" : "1"}, delay)
                    .animate({"opacity" : "0"}, 400, function(){
                            (z == cyclelSlides) ? z=0 : z++;
                            cycle();
                    });
            };
    cycle();
})
  • Share
  • Copyright 2016 by WebiBeris.com. All Rights Reserved.