原生JS轮播图

最新推荐文章于 2022-10-11 12:52:27 发布

TAT0_0

最新推荐文章于 2022-10-11 12:52:27 发布

阅读量300

点赞数

本文链接：https://blog.csdn.net/yesbuy201701/article/details/73916484

版权

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }

            body {
                width: 640px;
                height: 340px;
                padding: 100px;
            }

            img {
                display: block;
            }

            #box {
                width: 620px;
                height: 340px;
                position: relative;
                overflow: hidden;
                box-shadow: 0 0 10px rgba(0, 0, 0, .8);
            }

            #imgs {
                width: 2480px;
                height: 340px;
                position: absolute;             
            }

            #imgs li {
                width: 620px;
                height: 340px;
                float: left;
            }

            #scroll {
                position: absolute;
                bottom: 10px;
                right: 40%;
            }

            #scroll li {
                float: left;
                display: block;
                width: 10px;
                height: 8px;
                border-radius: 8px;
                background: lightgray;
                margin-right: 10px;
                box-shadow: 0 0 5px rgba(0, 0, 0, .8);
            }

            #scroll li.active {
                width: 30px;
            }

            #btn {
                position: relative;
                top: 40%;
                width: 620px;
                height: 50px;               
            }

            #btn span {
                float: left;
                display: block;
                width: 27px;
                height: 50px;               
                cursor: pointer;
            }

            #left {
                z-index: 10;
                position: absolute;
                left: 0;
                background: url(img/bg_24.png) 54px 0;
            }

            #right {
                z-index: 10;
                position: absolute;
                right: 0;
                background: url(img/bg_24.png) 81px 0;
            }
        </style>
    </head>

    <body>
        <div id="box">
            <ul id="imgs">
                <li><img src="img/1.jpg" /></li>
                <li><img src="img/2.jpg" /></li>
                <li><img src="img/3.jpg" /></li>
                <li><img src="img/4.jpg" /></li>
            </ul>
            <ul id="scroll">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div id="btn">
                <span id="left"></span>
                <span id="right"></span>
            </div>
        </div>
    </body>
    <script>
        var oBox = document.getElementById('box');
        var oImgs = document.getElementById('imgs');
        oImgs.innerHTML += oImgs.innerHTML;
        var oLi = oImgs.getElementsByTagName('li');
        var oUl = document.getElementById('scroll');
        var aLi = oUl.getElementsByTagName('li');
        var oBtn = document.getElementById('btn');
        var oLeft = document.getElementById('left');
        var oRight = document.getElementById('right');
        var now = 0;
        var timer = null;
        var oW = oLi[0].offsetWidth;
        var speed = 20;
        oImgs.style.width = oLi[0].offsetWidth*oLi.length + 'px';


        //小圆点的状态
        function show() {
            for (i = 0; i < aLi.length; i++) {
                aLi[i].className = '';
            }
            aLi[now].className = 'active';
            oImgs.style.left = -oW * now + 'px';
            if (oImgs.style.left <= -oImgs.style.width / 2) {
                oImgs.style.left = 0;
            }
        }

        //点击向左移动
        oLeft.onclick = function() {
            next();
        }

            //向右移动
        oRight.onclick = function() {
            prev();
        }

        function next() {
            now++
            if (now > oLi.length/2 - 1) {
                now = 0;
            }
            show();
        }

        function prev() {
            now--
            if (now < 0) {
                now = oLi.length/2 - 1;
            }
            show();
        }
        //小圆点对应图片
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].index = i;
            aLi[i].onclick = function() {
                now = this.index;
                show();
            }
        }
        //自动轮播
        function auto() {
            timer = setInterval(function() {
                next();
            }, 2000);
        }
        auto();
        oBox.onmouseover = function() {
            clearInterval(timer);
        }
        oBox.onmouseout = function() {
            auto();
        }
    </script>

</html>

TAT0_0

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生JS轮播图

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0;
复制链接

扫一扫