（练习）简单—轮播图

最新推荐文章于 2024-05-30 15:01:09 发布

邢帥兵_

最新推荐文章于 2024-05-30 15:01:09 发布

阅读量101

点赞数

分类专栏： js css html 文章标签： css html css3

本文链接：https://blog.csdn.net/m0_64875238/article/details/126138934

版权

js 同时被 3 个专栏收录

41 篇文章 27 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

css

6 篇文章 1 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #banner {
            position: relative;
            width: 1000px;
            height: 600px;
            overflow: hidden;
            margin: 0 auto;
        }

        #banner img {
            width: 100%;
            height: 100%;

        }

        #banner .jiantou {
            position: absolute;
            top: 50%;
            margin-top: -50px;
            z-index: 100;
            width: 1000px;
            height: 100px;
            padding-left: 30px;
            /* background-color:aqua; */
        }

        #banner .jiantou button {
            background-color: rgba(0, 0, 0, 0);
            border: 0;
            font-size: 100px;
            color: aqua;
        }

        #banner .jiantou #right {
            margin-right: 60px;
            float: right;
        }
    </style>

</head>

<body>
    <div id="banner">
        <div class="jiantou">
            <button id="left"> <</button>
            <button id="right">></button>
        </div>
        <img src="./img/1.png" alt="" id="tu">
    </div>

</body>
<script>
    function tong(n) {
        return document.getElementById(n);
    }
    var banner = tong("banner");
    var left = tong("left");
    var right = tong("right");
    var tu = tong("tu");


    var tuck = ["img/1.png", "img/2.png", "img/3.png", "img/4.png"]
    var timer = null;
    var i = 0;

    // 左箭头
    left.onclick = function () {
        i--;
        if (i < 0) {
            i = tuck.length - 1;
        }
        tu.src = tuck[i];
    }
    //右箭头
    right.onclick = function () {
        i++;
        if (i > tuck.length - 1) {
            i = 0;
        }
        tu.src = tuck[i];
    }
    //加定时器
    function ding() {
        timer = setInterval(function () {
            right.onclick();
        }, 2000);
    }
    ding();

    //鼠标经过
    banner.onmouseover = function () {
        clearInterval(timer); //清除定时器
    }
    //鼠标离开
    banner.onmouseout = function () {
        ding();//调用定时器
    }

</script>

</html>