[jQuery] Feature List

Este script es genial para mostrar contenido destacado de tu pagina, en la portada de tu sitio!

Primero que nada debemos colocar este codigo entre los tags y (en caso de PWG colocarlo en texto por encima de la pagina)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://jqueryglobe.com/labs/feature_list/jquery.featureList-1.0.0.js"></script>
<style type="text/css">
h3 {
margin: 0;   
padding: 7px 0 0 0;
font-size: 16px;
text-transform: uppercase;
}
div#feature_list {
    width: 750px;
    height: 240px;
    overflow: hidden;
    position: relative;
}

div#feature_list ul {
    position: absolute;
    top: 0;
    list-style: none;   
    padding: 0;
    margin: 0;
}

ul#tabs {
    left: 0;
    z-index: 2;
    width: 320px;
}
        ul#tabs li {
            font-size: 12px;
            font-family: Arial;
        }

        ul#tabs li img {
            padding: 5px;
            border: none;
            float: left;
            margin: 10px 10px 0 0;
        }

        ul#tabs li a {
            color: #222;
            text-decoration: none;   
            display: block;
            padding: 10px;
            height: 60px;
            outline: none;
        }

        ul#tabs li a:hover {
            text-decoration: underline;
        }

        ul#tabs li a.current {
            background:  url('feature-tab-current.png');
            color: #FFF;
        }

        ul#tabs li a.current:hover {
            text-decoration: none;
            cursor: default;
        }

        ul#output {
            right: 0;
            width: 463px;
            height: 240px;
            position: relative;
        }

        ul#output li {
            position: absolute;
            width: 463px;
            height: 240px;
        }

        ul#output li a {
            position: absolute;
            bottom: 10px;
            right: 10px;
            padding: 8px 12px;
            text-decoration: none;
            font-size: 11px;
            color: #FFF;
            background: #000;
            -moz-border-radius: 5px;
        }

        ul#output li a:hover {
            background: #D33431;
        }
    </style>

    <script language="javascript">
        $(document).ready(function() {

            $.featureList(
                $("#tabs li a"),
                $("#output li"), {
                    start_item    :    1
                }
            );

            /*

            // Alternative

            $('#tabs li a').featureList({
                output        :'#output li',
                start_item        :1
            });

            */

        });
    </script>

Y luego para usarlo debemos utilizar el siguiente codigo (lo debes colocar donde quieras que se vea el efecto)

Demo

Fuente