Slideshow em JS puro

by franklinjavier

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Slideshow JS</title>

    </head>

    <body>

        <!-- Parte total do slideshow-->
        <div id="tudo">

            <!-- Coluna 1 - Nome das Notícias -->
            <div id="coluna_um">
                <ul>
                    <li>
                    <a href="" onmouseover='' id="noticia1" class="fotos" data-slide="foto1">
                        <h3>Teste de Título 1</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget augue purus, at interdum turpis.</p>
                    </a>
                    </li>
                    <li>
                    <a href="" onmouseover="" id="noticia2" class="fotos" data-slide="foto2">
                        <h3>Teste de Título 2</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget augue purus, at interdum turpis.</p>
                    </a>
                    </li>
                    <li>
                    <a href="" onmouseover="" id="noticia3" class="fotos" data-slide="foto3">
                        <h3>Teste de Título 3</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget augue purus, at interdum turpis.</p>
                    </a>
                    </li>
                    <li>
                    <a href="" onmouseover="" id="noticia4" class="fotos" data-slide="foto4">
                        <h3>Teste de Título 4</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget augue purus, at interdum turpis.</p>
                    </a>
                    </li>
                </ul>
            </div>

            <!-- Coluna 2 - Foto das Notícias -->
            <div id="coluna_dois">
                <ul>
                    <a href="#" id="foto1">
                        <li>
           ...

CSS

#tudo{
    width:1000px;
    height:400px;
    border:1px solid #333;
    margin:120px auto;
    padding:0 auto;
}

#coluna_um{
    width:30%;
    background:#F8F7F7;
    float:left;
    margin-top:0 !important;
    height:400px;
}

#coluna_um ul{
    text-decoration:none;
    list-style:none;
    margin:0px !important;
    padding:0px;
    width:97%;
}

#coluna_um li{
    text-decoration:none;
    list-style:none;
    width:100%;
    padding:5px;
    height:88px;
    border-bottom:1px solid #CCCCCC;
    border-top:1px solid #FFFFFF;
    margin:0px !important;
    opacity: 1;
}

#coluna_um ul a li:hover{
    text-decoration:none;
    list-style:none;
    width:100%;
    height:88px;
    background:#FFFFFF;
    margin:0px !important;
}

#coluna_dois{
    width:70%;
    float:left;
    margin-top:0 !important;
    height:400px;
}

#coluna_dois ul{
    text-decoration:none;
    list-style:none;
    margin:0px !important;
    padding:0px;
    width:98%;
}

#coluna_dois ul a li{
    text-decoration:none;
    list-style:none;
    width:100%;
    padding:6px;
    height:88px;
}

#coluna_dois ul a li h3, 
#noticia1, #noticia2,
#noticia3, #noticia4{
    text-decoration:none;
    list-style:none;
    font-size:15px;
    color:#333333;
}

#coluna_dois ul a li p,
#noticia1, #noticia2,
#noticia3, #noticia4{
    text-decoration:none;
    list-style:none;
    font-size:12px;
    color:#333333;
    overflow:hidden;
}

#foto1{
    background:#00CC33;
    width:102%;
    float:left;
    margin-top:0 !important;
    height:400px;
    opacity: 0;
    z-index:9999999;
}

#foto2{
    background:#66FF99;
    width:102%;
    float:left;
    margin-top:0 !important;
    height:400px;
    opacity: 0;
    z-index:9999999;
}

#foto3{
    background:#CC6699;
    width:102%;
    float:left;
    margin-top:0 !important;
    height:400px;
    opacity: 0;
    z-index:9999999;
}

#foto4{
    background:#FFCC00;
    width:102%;
    float:left;
    margin-top:0 !important;
    height:400px;
   ...

JavaScript

var Slideshow = Slideshow || {};

(function( window, document ){

    Slideshow = {

        fadeIn: function() {

            var el = arguments[0],
                speed = arguments[1];

            if ( el.style ) {
                el.style.opacity = '0';
            }

            window.timer = setInterval( function() {

                el.style.opacity = +(el.style.opacity) + 0.1;

                if ( el.style.opacity > 1 ) {
                    clearInterval( timer );
                }

            }, speed / 50 );
        
        },

        hideAll: function() {
        
            var fn = arguments[0],
                list = document.querySelectorAll(".fotos"),
                listLength = list.length,
                i = 0;

            for( i; i < listLength; i++ ) {
                var $this = document.getElementById( list[ i ].getAttribute('data-slide') );
                $this.style.opacity = 0;
                $this.style.display = 'none';
            }

            if ( fn && typeof fn === 'function' )
                fn();
            
        
        }
    
    }

    window.addEventListener("DOMContentLoaded", function () {

        var nodeList = document.querySelectorAll("#coluna_um li"),
            listLength = nodeList.length,
            i = 0;

        for( ; i < listLength; i++ ) {
            ev.addEvent( nodeList[ i ], 'mouseenter', enter, false );

            function enter() {

                var $pict = document.getElementById( this.childNodes[ 1 ].getAttribute('data-slide') );

                Slideshow.hideAll(function() {
                    $pict.style.display = 'block';
                    Slideshow.fadeIn( $pict , 100);
                });
            }

        }

    }, true);


})( window, document );



/* mouseenter/leave
 http://blog.stchur.com/2007/03/15/mouseenter-and-mouseleave-events-for-firefox-and-other-non-ie-browsers/
*/

var ev = {
    evtHash: [],

    ieGetUniqueID: function (_elem) {
        if(_elem...