﻿
function load() {

    function $ID(_id) {
        return document.getElementById(_id)
    }


    var bg1 = document.getElementById('hotpicbg1');
    var bg2 = document.getElementById('hotpicbg2');
    var bg3 = document.getElementById('hotpicbg3');
    var bg4 = document.getElementById('hotpicbg4');
    var bg5 = document.getElementById('hotpicbg5');

    var timer
    var curIndex = 0
    var bgArr = [bg1, bg2, bg3, bg4, bg5]
    var picArr = $ID('picframe').getElementsByTagName('img')
    var desArr = $ID('picdes').getElementsByTagName('p')


    /*******************鼠标动作*********************/

    for (var i = 0; i < bgArr.length; i++) {

        bgArr[i].onmouseover = function(event) {
            event = window.event ? window.event : event
            obj = event.srcElement ? event.srcElement : event.target

            setChildren()
            if (obj.className == "hottipoffframe") {
                obj.className = 'hottiponframe'
                obj.getElementsByTagName("div")[0].className = "firstdes";
                curIndex = obj.getAttribute("index")
            } else if (obj.className == "hotpicthumb") {
                obj.parentNode.className = 'hottiponframe'
                obj.parentNode.getElementsByTagName("div")[0].className = "firstdes";
                curIndex = obj.parentNode.getAttribute("index")
            } else if (obj.className == "firstdes") {
                obj.parentNode.className = 'hottiponframe'
                obj.parentNode.getElementsByTagName("div")[0].className = "firstdes";
                curIndex = obj.parentNode.getAttribute("index")
            } else if (obj.className == "otherdes") {
                obj.parentNode.className = 'hottiponframe'
                obj.parentNode.getElementsByTagName("div")[0].className = "firstdes";
                curIndex = obj.parentNode.getAttribute("index")
            }

            setCurrent(curIndex)
        }
    }

    function setChildren() {
        for (var t = 0; t < bgArr.length; t++) {
            bgArr[t].className = 'hottipoffframe'
            bgArr[t].getElementsByTagName("div")[0].className = "otherdes";
        }
    }

    /*******************定时器*********************/


    timer = setInterval(function() {
        curIndex++
        curIndex %= bgArr.length

        for (var z = 0; z < bgArr.length; z++) {
            if (z == curIndex) {
                bgArr[z].className = 'hottiponframe'
                bgArr[z].getElementsByTagName("div")[0].className = "firstdes";
                setCurrent(z)
            } else {
                bgArr[z].className = 'hottipoffframe'
                bgArr[z].getElementsByTagName("div")[0].className = "otherdes";
            }
        }

    }, 4000)


    /*******************大图片配置*********************/

    function setCurrent(turn) {
        for (var i = 0; i < picArr.length; i++) {
            if (i == turn) {
                picArr[i].className = 'hoteyeon'
                desArr[i].style.display = 'block';
            } else {
                picArr[i].className = 'hoteyeoff'
                desArr[i].style.display = 'none';
            }

        }

    }
    setCurrent(0)//------------------->首次显示图片
}
window.attachEvent("onload", load);
