淘宝首页图片幻灯效果

http://www.chinacxy.com/JsDetail.aspx?id=3

by Lien Z

HTML

<h1>淘宝首页图片幻灯效果(Artwl:2012/2/26)</h1>
<div id="ad" class="ad">
    <ol id="ad_ol">
        <li><a href="http://jscode.chinacxy.com"><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/r_01.jpg"/></a></li>
        <li><a href="http://jscode.chinacxy.com"><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/r_02.jpg"/></a></li>
        <li><a href="http://jscode.chinacxy.com"><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/r_03.jpg"/></a></li>
        <li><a href="http://jscode.chinacxy.com"><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/r_04.jpg"/></a></li>
        <li><a href="http://jscode.chinacxy.com"><img src="http://images.cnblogs.com/cnblogs_com/artwl/357654/r_05.jpg"/></a></li>
    </ol>
    <ul id="index" class="index">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

CSS

html,body,div,ul,ol,li,img,a{
    margin:0px;
    padding:0px;
    border:0;
}
.ad,.ad li{
    position:relative;
    height:480px;
    width:640px;
    overflow:hidden;
}
ol,ul{
    list-style:none;
}
.index {
    bottom: 5px;
    height: 18px;
    padding-top: 2px;
    position: absolute;
    right: 5px;
    z-index: 10;
}
.index li {
    background-color: white;
    opacity: .7;
    color: #DE7D4B;
    height: 20px;
    line-height: 20px;
    margin-top: -2px;
    width: 20px;
    float: left;
    text-align: center;
    font-size: 13px;
    margin-left: 3px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    overflow: visible;
}
li.curr_index{
    background-color:#FF3300;
    color:#FFF;
    font-weight:bolder;
}

JavaScript

function $(ID) {
    var element = document.getElementById(ID || 'nodId');
    if (element) {
        element.css = css;
    }
    return element;
}

function css(prop, value) {
    if (value == null) {
        var b = (window.navigator.userAgent).toLowerCase();
        var s;
        if (/msie|opera/.test(b)) {
            s = this.currentStyle
        } else if (/gecko/.test(b)) {
            s = document.defaultView.getComputedStyle(this, null);
        }
        if (s[prop] != undefined) {
            return s[prop];
        }
        return this.style[prop];
    }
    if (prop) {
        this.style[prop] = value;
    }
    return true;
}

var getElementsByClass = function(searchClass, node, tag) {
    var classElements = new Array();
    if (node == null) node = document;
    if (tag == null) tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if (pattern.test(els[i].className)) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}

var image_Index = 0,
    image_Run, leave_Height = 100,
    oleave_Height = leave_Height,
    speed = 5000;

function imageRun() {
    var image_Count = $("index").getElementsByTagName("li").length;
    var height = parseInt($("ad").css("height"));
    $("ad_ol").css("position", "absolute");
    $("ad_ol").css("top", "-" + (image_Index * height) + "px");
    currentPosition = parseInt($("ad_ol").css("top"));
    upOrDown();
    clearCurrIndex();
    $("index").getElementsByTagName("li")[image_Index].className = "curr_index";
    image_Index++;
    image_Index = image_Index % image_Count;
}

function bindindex() {
    var pArray = $("index").getElementsByTagName("li"),
        i = 0,
        length = pArray.length,
        height = parseInt($("ad").css("height"));
    for (; i < length; i++) {
        pArray[i].onmousemove = function()...