当前位置: 首页 >>JAVASCRIPT >>JS实战技巧 >>HDHCMS收集纯JS轮播图源码HDHCMS收集纯JS轮播图源码

HDHCMS收集纯JS轮播图源码HDHCMS收集纯JS轮播图源码

时间:2020/7/13 10:55:00 【admin】

HDHCMS收集纯JS轮播图源码…

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        .HdhCmsLbt {

            margin: 60px auto;

            overflow: hidden;

            position: relative;

            margin: 100px auto;

        }


            .HdhCmsLbt ul {

                position: absolute;

            }

                .HdhCmsLbt ul li img{

                }


            .HdhCmsLbt ol {

                position: absolute;

                right: 5px;

                bottom: 10px;

            }

                .HdhCmsLbt ol li {

                    height: 20px;

                    width: 20px;

                    background: #ccc;

                    border: solid 1px #666;

                    margin-left: 5px;

                    color: #000;

                    float: left;

                    line-height: center;

                    text-align: center;

                    cursor: pointer;

                }


                .HdhCmsLbt ol .on {

                    background: #E97305;

                    color: #fff;

                }

    </style>

    <script type="text/javascript">

        window.onload = function () {

            var HdhCmsLbt = document.getElementById('HdhCmsLbt'),

            HdhCmsImg = document.getElementById('HdhCmsImg').getElementsByTagName("li"),

            list = document.getElementById('list').getElementsByTagName('li'),

            index = 0,

            timer = null;


            // 定义并调用自动播放函数

            timer = setInterval(autoPlay, 2000);


            // 鼠标划过整个容器时停止自动播放

            HdhCmsLbt.onmouseover = function () {

                clearInterval(timer);

            }


            // 鼠标离开整个容器时继续播放至下一张

            HdhCmsLbt.onmouseout = function () {

                timer = setInterval(autoPlay, 2000);

            }

            // 遍历所有数字导航实现划过切换至对应的图片

            for (var i = 0; i < list.length; i++) {

                list[i].onmouseover = function () {

                    clearInterval(timer);

                    index = this.innerText - 1;

                    changePic(index);

                };

            };


            function autoPlay() {

                if (++index >= HdhCmsImg.length) index = 0;

                changePic(index);

            }


            // 定义图片切换函数

            function changePic(curIndex) {

                for (var i = 0; i < HdhCmsImg.length; ++i) {

                    HdhCmsImg[i].style.display = "none";

                    list[i].className = "";

                }

                HdhCmsImg[curIndex].style.display = "block";

                list[curIndex].className = "on";

            }


        };


    </script>

</head>

<body>

    <div id='HdhCmsLbt' style='height: 360px;width: 482px;'>

        <ul id="HdhCmsImg">

            <li style='height:360px;'><img alt="" src="http://www.hdhcms.com/upfiles/images/20181130/201811302058347627.jpg" style='width: 482px;height: 360px;'></li>

            <li style='height:360px;'><img alt="" src="http://www.hdhcms.com/upfiles/images/20181130/201811302117573920.jpg" style='width: 482px;height: 360px;'></li>

            <li style='height:360px;'><img alt="" src="http://www.hdhcms.com/upfiles/images/20181130/201811302244032278.jpg" style='width: 482px;height: 360px;'></li>

            <li style='height:360px;'><img alt="" src="http://www.hdhcms.com/upfiles/images/20181130/201811302310436772.jpg" style='width: 482px;height: 360px;'></li>

            <li style='height:360px;'><img alt="" src="http://www.hdhcms.com/upfiles/images/20181130/201811302117573920.jpg" style='width: 482px;height: 360px;'></li>

        </ul>

        <ol id="list">

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ol>

    </div>

</body>

</html>


CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com

分享按钮