原生Javascript的老经典案例轮播图

最新推荐文章于 2024-07-26 20:46:33 发布

ita_code

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量111

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43490372/article/details/108665940

版权

为了考证的复习需要！重过一遍基础内容。加油加油
效果图就不贴了，巩固基础就是要多练习案例！不懂就问

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        ul {
            list-style: none;
        }

        #banner {
            width: 958px;
            height: 400px;
            overflow: hidden;
            margin: 100px auto;
            position: relative;
        }

        #banner_img {
            width: 7000px;
            position: absolute;
            left: 0;
            top: 0;
        }

        #banner_img li a img {
            float: left;
        }

        #banner_yd {
            position: absolute;
            bottom: 10px;
            width: 100%;
            text-align: center;
            /* font-size: 0; */
        }

        #banner_yd li {
            width: 10px;
            height: 10px;
            display: inline-block;
            border-radius: 50%;
            background-color: rgb(119, 93, 93);
            margin-left: 10px;
        }

        #banner:hover #banner_anniu span {
            background-color: cornflowerblue;
            width: 20px;
            height: 50px;
            display: inline-block;
            text-align: center;
            line-height: 50px;
        }

        #banner:hover #prev {
            position: absolute;
            left: 0px;
            top: 150px;
        }

        #banner:hover #next {
            position: absolute;
            right: 0px;
            top: 150px;
        }

        .activ {
            background-color: chocolate !important;
            color: darkblue;
        }
    </style>
</head>

<body>
    <div id="banner">
        <ul id="banner_img" style="left: -958px;">
            <li><a href="#img5"><img src="img/5.jpg" /></a></li>
            <li><a href="#img1"><img src="img/1.jpg" /></a></li>
            <li><a href="#img2"><img src="img/2.jpg" /></a></li>
            <li><a href="#img3"><img src="img/3.jpg" /></a></li>
            <li><a href="#img4"><img src="img/4.jpg" /></a></li>
            <li><a href="#img5"><img src="img/5.jpg" /></a></li>
            <li><a href="#img1"><img src="img/1.jpg" /></a></li>
        </ul>
        <ul id="banner_yd">
            <li class="activ"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div id="banner_anniu">
            <span id="prev">
                < </span>
                    <span id="next">
                        >
                    </span>
        </div>
    </div>
    <script>
        var banner = $node("banner");
        var bImg = $node("banner_img");
        //获取图片数量
        var bImgNum = bImg.getElementsByTagName('img').length;

        var setTime = null;
        var index = 0;

        //小圆点
        var bYd = $node("banner_yd").getElementsByTagName("li");
        var bYdlength = bYd.length;

        for (let j = 0; j < bYd.length; j++) {
            bYd[j].onclick = function () {
                console.log(j, -(j + 1) * banner.offsetWidth)
                bImg.style.left = -(j + 1) * banner.offsetWidth + "px";
                for (var i = 0; i < bYd.length; i++) {
                    bYd[i].className = ""
                }
                bYd[j].className = "activ";
                index = j;
                showD();
            }
        }
        //定时器
        function setBof() {
            setTime = setInterval(function () {
                nextImg(bImg);
            }, 1000);
        }
        setBof();

        banner.onmouseout = function () {
            setBof();
        }
        banner.onmouseover = function () {
            clearInterval(setTime)
        }
        var prev = $node("prev");
        var next = $node("next");
        prev.onclick = function () {
            perveImg(bImg);
        }
        next.onclick = function () {
            nextImg(bImg);
        }
        //图片轮播函数
        function nextImg(node) {
            var newLeft;
            if (node.style.left == -(bYdlength+1) * banner.offsetWidth + "px") {
                newLeft = -2 * banner.offsetWidth;
            } else {
                newLeft = parseInt(node.style.left) - banner.offsetWidth;
            }
            node.style.left = newLeft + "px";

            index++;
            if (index > (bYdlength - 1)) {
                index = 0;
            }
            showD();
        }
        function perveImg(node) {
            var newLeft;
            console.log(node.style.left)
            if (node.style.left == "0px") {
                newLeft = -(bYdlength - 1) * banner.offsetWidth;
            } else {
                newLeft = parseInt(node.style.left) + banner.offsetWidth;
            }
            node.style.left = newLeft + "px";

            index--;
            if (index < 0) {
                index = (bYdlength - 1);
            }
            showD();
        }
        //添加class属性设置
        function showD() {
            for (var i = 0; i < bYd.length; i++) {
                bYd[i].className = "";
            }
            bYd[index].className = "activ";
        }

        //简化获取节点操作
        function $node(node) {
            return document.getElementById(node);
        }
    </script>
</body>

</html>

ita_code

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生Javascript的老经典案例轮播图

为了考证的复习需要！重过一遍基础内容。加油加油效果图就不贴了，巩固基础就是要多练习案例！不懂就问<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</tit
复制链接

扫一扫