js图片轮换播放器

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="move.js" >
        function getByClass(oparent, sClass)
        {
            var aEle = oparent.getElementsByTagName('*');
            var aResult = [];

            for(var i=0; i<aEle.Length;i++)
            {
                if(aEle[i].className==sClass)
                {
                    aResult.push(aEle[i]);
                }
            }

            return aResult;
        }

        window.onload = function () {
            var oDiv = document.getElementById('playimages');
            var oBtnPrev = getByClass(oDiv, 'prev')[0];
            var oBtnNext = getByClass(oDiv, 'next')[0];
            var oMarkLeft = getByClass(oDiv, 'mark_left')[0];
            var oMarkRight = getByClass(oDiv, 'mark_right')[0];

            var oDivSmall = getByClass(oDiv, 'small_pic')[0];
            var oUiSmall = oDivSmall.getElementsByTagName('ul')[0];
            var aLiSmall = oDivSmall.getElementsByTagName('li');

            var oUlBig = getByClass(oDiv, 'big_pic')[0];
            var aLiBig = oUiBig.getElementsByTagName('li');

            var nowZIndex = 2;
            var now = 0;

            oUiSmall.style.width = aLiSmall.length * aLiSmall[0].offsetWidth + 'px';

            //左右按钮
            oBtnPrev.onmouseover = oMarkLeft.onmouseover = function () {
                startMove(oBtnPrev, 'opacity', 100);
            };
            oBtnPrev.onmouseout = oMarkLeft.onmouseout = function () {
                startMove(oBtnPrev, 'opacity', 0);
            };
            oBtnNext.onmouseover = oMarkRight.onmouseover = function () {
                startMove(oBtnNext, 'opacity', 100);
            };
            oBtnNext.onmouseout = oMarkRight.onmouseout = function () {
                startMove(oBtnNext, 'opacity', 0);
            };

            //大图切换
            for (var i = 0; i < aLiSmall.length; i++) {
                aLiSmall[i].index = i;
                aLiSmall[i].onclick = function () {
                    if (this.index == now) return;

                    now = this.index;

                    tab();
                };

                aLiSmall[i].onmouseover = function () {
                    startMove(this, 'opacity', 100);
                };
                aLiSmall[i].onmouseout = function () {
                    if (this.index != now) {
                        startMove(this, 'opacity', 60);
                    }

                };
            }

            function tab()
            {
                aLiBig[now].style.zIndex = nowZIndex++;
                for (var i = 0; i < aLiSmall.length; i++) {
                    startMove(aLiSmall[i], 'opacity', 60);
                }

                startMove(aLiSmall[now], 'opacity', 100);

                aLiBig[now].style.height = 0;
                startMove(aLiBig[now], 'height', 320);

                if (now == 0)
                {
                    startMove(oUiSmall, 'left', 0);
                }
                else if (now == aLiSmall.length - 1)
                {
                    startMove(oUiSmall, 'left', -(now - 2) * aLiSmall[0].offsetWidth);
                }
                else
                {
                    startMove(oUiSmall, 'left', -(now - 1) * aLiSmall[0].offsetWidth);
                }
                
            }

            oBtnPrev.onclick = function () {
                now--;
                if(now==-1)
                {
                    now = aLiSmall.length - 1;
                }
                tab();
            };

            oBtnNext.onclick = function () {
                now++;
                if(now==aLiSmall.length)
                {
                    now = 0;
                }
                tab();

            };

            var timer=setInterval(oBtnNext.onclick, 2000);
            oDiv.onmouseover = function () {
                clearInterval(timer);
            };
            oDiv.onmouseout = function () {
                timer = setInterval(oBtnNext.onclick, 2000);
            };
        };

    </script>
</head>
<body>
    <div id="playimages" class="play">
        <ul class="big_pic">

            <div class="prev"></div>
            <div class="new"></div>

            <div class="text">加载图片说明......</div>
            <div class="length">计算图片数量......</div>

            <a class="mark_left" href="javascipt:;"></a>
            <a class="mark_right" href="javascipt:;"></a>
            <div class="bg"></div>

            <li style="z-index:1;"><img src="images/1.jpg" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
            <li><img src="images/6.jpg" /></li>
        </ul>
        <div class="small_pic">
            <ul style="width:390px;">
                <li style="filter:100; opacity:1;"><img src="images/1.jpg" /></li>
                <li><img src="images/2.jpg" /></li>
                <li><img src="images/3.jpg" /></li>
                <li><img src="images/4.jpg" /></li>
                <li><img src="images/5.jpg" /></li>
                <li><img src="images/6.jpg" /></li>
            </ul>
        </div>
    </div>
</body>
</html>
posted @ 2020-02-17 10:14 八风不动阅读(163) 评论(0) 收藏举报
刷新页面返回顶部
八风不动

js图片轮换播放器

公告
