轮播图的实现

最新推荐文章于 2024-11-13 01:18:00 发布

立志成为有钱人

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量368

点赞数 11

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2301_79605560/article/details/140851880

版权

这个真的好不容易，昨天bug改了好久，今天又遇到bug

<!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>
        * {
            margin: 0;
            padding: 0;
            text-align: center;
            list-style: none;
        }

        .ull {
            width: 5470px;
            position: absolute;
        }

        img {
            width: 1094px;
            height: 527px;
            float: left;

        }



        .circle {
            padding: 0;
            margin: 0;
            list-style: none;
            position: absolute;
            bottom: 30px;
            left: 50%;
        }

        .circle li {
            width: 14px;
            height: 14px;
            border-radius: 100%;
            background-color: black;
            float: left;
            margin-right: 10px;
        }

        .bigbox {
            width: 1094px;
            height: 527px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }
    </style>
    <script src="动画函数/animate.js"></script>
</head>

<body>
    <div class="bigbox">
        <ul class="ull">
            <li><a href=""><img src="imags/image.png"></a>
            </li>
            <li><a href=""><img src="imags/image1.png">
                </a></li>
            <li><a href=""><img src="imags/image3.png"></a>
            </li>
            <li><a href=""><img src="imags/image4.png"></a>
            </li>

        </ul>

        <ul class="circle">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var ul = document.querySelector('.ull');
        var ol = document.querySelector('.circle');
        var li = ol.querySelectorAll('li');
        var first = ul.children[0].cloneNode(true);
        ul.appendChild(first);
        li[0].style.backgroundColor = 'white';
        for (var i = 0; i < li.length; i++) {
            li[i].setAttribute('index', i);
        }
        for (var i = 0; i < li.length; i++) {
            li[i].addEventListener('click', function () {
                for (var i = 0; i < li.length; i++) {
                    li[i].style.backgroundColor = 'black';
                }
                this.style.backgroundColor = 'orange';
                var index = this.getAttribute('index');
                animate(ul, -1094 * index);
            })
        }
    </script>
</body>

</html>

animate的动画函数就先不放了，大家可以自己试试写写。运行结果如下：