纯JS仿FLASH图片轮换播放

纯JS仿FLASH图片轮换播放纯JS仿FLASH图片轮换播放是一款带有缩略图选项卡，自动轮播切换的JS幻灯片。js图片轮换缩略图自动切换 所属专题：幻灯片代码

<script type="text/javascript">
    function getByClass(oParent,sClass) {
        var aMent = oParent.getElementsByTagName("*");
        var aEle = [];
        for (var i = 0; i < aMent.length; i++) {
            if (aMent[i].className == sClass) {
                aEle.push(aMent[i]);
            }
        }
        return aEle;
    };
    window.onload = function () {
        //左右按钮
        var oDiv = document.getElementById("playments");
        var oBtnleft = getByClass(oDiv, "btnleft")[0];
        var oBtnright = getByClass(oDiv, "btnright")[0];
        var oMarkleft = getByClass(oDiv, "markleft")[0];
        var oMarkright = getByClass(oDiv, "markright")[0];
        oBtnleft.onmouseover = oMarkleft.onmouseover = function () {
            move(oBtnleft, 'opacity', 100);
        };
        oBtnleft.onmouseout = oMarkleft.onmouseout = function () {
            move(oBtnleft, 'opacity', 0);
        };
        oBtnright.onmouseover = oMarkright.onmouseover = function () {
            move(oBtnright, 'opacity', 100);
        };
        oBtnright.onmouseout = oMarkright.onmouseout = function () {
            move(oBtnright, 'opacity', 0);
        };






        //大图切换
        var oBigUl = getByClass(oDiv, "bigimgsul")[0];
        var aBigLi = oBigUl.getElementsByTagName("li");
        var oSmallDiv = getByClass(oDiv, "smallimgs")[0];
        var oSmallUl = oSmallDiv.getElementsByTagName("ul")[0];
        var aSmallLi = oSmallDiv.getElementsByTagName("li");
        var nowZIndex = 2;
        var now = 0;
        oSmallUl.style.width = (aSmallLi.length + aSmallLi.length / 8) * aSmallLi[0].offsetWidth + 'px';
        for (var i = 0; i < aSmallLi.length; i++) {
            aSmallLi[i].index = i;
            aSmallLi[i].onclick = function () {
                if (this.index == now) return;
                now = this.index;
                tab();
            };
            aSmallLi[i].onmouseover = function () {
                move(this, 'opacity', 100)
            };
            aSmallLi[i].onmouseout = function () {
                if (this.index != now) {
                    move(this, 'opacity', 40)
                };
            };
        };
        function tab() {
            aBigLi[now].style.zIndex = nowZIndex++;
            for (var j = 0; j < aSmallLi.length; j++) {
                move(aSmallLi[j], 'opacity', 40)
            };
            move(aSmallLi[now], 'opacity', 100);
            aBigLi[now].style.height = 0;
            move(aBigLi[now], 'height', 333);
            if (now == 0 || now == 1 || now == 2 || now == 3) {
                move(oSmallUl, 'left', 10);
            }


            //            else if (now == aSmallLi.length - 1 || now == aSmallLi.length - 2 || now == aSmallLi.length - 3 || now == aSmallLi.length - 4) {
            //                move(oSmallUl, 'left', -(now - 3) * (aSmallLi[0].offsetWidth + 10));
            //            }
            else if (now == aSmallLi.length - 1) {
                move(oSmallUl, 'left', -(now - 3) * (aSmallLi[0].offsetWidth + 10) + 10);
            }
            else if (now == aSmallLi.length - 2) {
                move(oSmallUl, 'left', -(now - 2) * (aSmallLi[0].offsetWidth + 10) + 10);
            }
            else if (now == aSmallLi.length - 3) {
                move(oSmallUl, 'left', -(now - 1) * (aSmallLi[0].offsetWidth + 10) + 10);
            }
            else {
                move(oSmallUl, 'left', -(now) * (aSmallLi[0].offsetWidth + 10) + 10);
            }
        };


        oBtnleft.onclick = function () {
            now--;
            if (now == -1) {
                now = aSmallLi.length - 1;
            };
            tab();
        };
        oBtnright.onclick = function () {
            now++;
            if (now == aSmallLi.length) {
                now = 0;
            };
            tab();
        };
            var timer = setInterval(oBtnright.onclick, 5000);
            oDiv.onmouseover = function () {
                clearInterval(timer);
            };
            oDiv.onmouseout = function () {
                timer = setInterval(oBtnright.onclick, 5000);
            };
    };
</script>