javajScript轮播图

最新推荐文章于 2023-10-16 18:00:25 发布

-解药

最新推荐文章于 2023-10-16 18:00:25 发布

阅读量167

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/l3357050095/article/details/124084095

版权

css:

<style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 900px;
            height: 400px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }

        .uls li {
            list-style: none;
            width: 900px;
            height: 400px;
            float: left;

        }

        .uls {
            width: 3600px;
            height: 400px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .uls li img {
            width: 900px;
            height: 400px;

        }

        button {
            width: 50px;
            height: 60px;
            background-color: rgb(0, 0, 0, 0.3);
            border: none;
            color: white;
            outline: none;
        }

        .btn1 {
            position: absolute;
            left: 0;
            top: 170px;
        }

        .btn2 {
            position: absolute;
            right: 0;
            top: 170px;
        }

        .ols li {
            list-style: none;
            width: 30px;
            height: 30px;
            background-color: #333;
            display: inline-block;
            margin-right: 20px;
            border-radius: 50%;

        }

        .ols {
            height: 30px;
            position: absolute;
            left: 350px;
            bottom: 0;

        }
    </style>

代码：

<body>
    <div>
        <ul class="uls">
            <li><img src="./img/87b3c920gy1gwzn21dih8j24702sonpe.jpg" alt=""></li>
            <li><img src="../img/b.jpg" alt=""></li>
            <li><img src="../img/c.jpg" alt=""></li>
            <li><img src="../img/d.jpg" alt=""></li>

        </ul>
        <button class="btn1"><</button>
                <button class="btn2">></button>

                <ol class="ols">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
    </div>
</body>

js代码：

<script>

    var box = document.querySelector('div')
    var uls = document.querySelector('.uls')
    var btn1 = document.querySelector('.btn1')
    var btn2 = document.querySelector('.btn2')
    var ols = document.querySelector('ol').children
    var index = 0;       // 声明下标   用来改变图片位置

    btn1.onclick = function () {
        index--    // 下标自减
        getsum()   // 每次点击 调佣getsum函数
    }

    btn2.onclick = function () {
        index++   // 下标自增
        getsum()  // 每次点击 调佣getsum函数

    }

    for (var i = 0; i < ols.length; i++) {
        ols[i].index = i    // 为每一个li储存下表 
        ols[i].onclick = function () {    // 给每一个li 绑定点击事件
            index = this.index;     // 将当前li 的下标 赋值给 index 
            getsum()        // 每次点击时  调佣getsum函数
        }
    }

    getsum()
    function getsum() {
        if (index > 3) {   // 当下标  大于3时（最多只有4张照片 0-3）让其等于0
            index = 0
        } else if (index < 0) {  // 当下标小于0时   让其等于3
            index = 3
        }
        uls.style.left = index * -900 + 'px'    // 让图片动起来

        for (var k = 0; k < ols.length; k++) {    // 给某一个li 添加背景颜色时 先让所有li的背景颜色为原有颜色
            ols[k].style.background = '#333'
        }
        ols[index].style.background = 'red'   // 给某一个li添加背景颜色
    }
    var item = null;
    item = setInterval(function () {   // 开启定时器
        btn2.onclick()    // 每两秒  执行一下  右边按钮的点击事件
    }, 2000)
    box.onmouseover = function () {    // 当鼠标划入box时  让定时器停止
        clearInterval(item)
    }
    box.onmouseout = function () {       // 鼠标移出box时  重新开启定时器
        item = setInterval(function () {
            btn2.onclick()
        }, 2000)
    }

</script>

-解药

关注

0
点赞
踩
0

收藏

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

css:<style> * { margin: 0; padding: 0; } div { width: 900px; height: 400px; margin: 0 auto; position: relative; overflow: hidden; }
复制链接

扫一扫