js小练——轮播图

最新推荐文章于 2024-07-20 23:54:17 发布

kumouya

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量70

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/zzbdkl/article/details/125758148

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>
</head>
<style>
    #lunbotu {
        width: 50%;
    }

    ul {
        width: 30%;
    }
</style>

<body>
    <div id="lunbotu">
        <a id="links" href="" target="_blank">
            <img id="image" src="">
        </a>
        <div id="left">
            < </div>
                <div id="right"> > </div>
                <div id="number">
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                    </ul>
                </div>
        </div>
</body>

<script>
    // 获得节点
    var lunbotu = document.getElementById("lunbotu");
    var links = document.getElementById("links");
    var image = document.getElementById("image");
    var left = document.getElementById("left");
    var right = document.getElementById("right");
    var numbers = document.getElementById("number").getElementsByTagName("li");
    var www = ["http://www.baidu.com/", "http://www.jd.com/", "https://www.taobao.com/",
        "http://www.bilibili.com/", "http://www.acfun.tv/", "http://www.dm530.com/"];
    var add = 1;
    numbers[0].style.background = "#fff";
    image.src = "./images/ad01.jpg";
    var len = numbers.length;
    links.href = www[0];
    lunbotu.onmouseover = function () {
        right.style.display = "block";
        left.style.display = "block";
        clearInterval(lun);
    }
    lunbotu.onmouseout = function () {
        right.style.display = "none";
        left.style.display = "none";
        lunbo();
    }
    right.onclick = function () {
        add = add + 1;
        if (add > 6) {
            add = 1;
        }
        image.src = "./images/ad0" + add + ".jpg";
        var x = add - 1;
        for (var i = 0; i < len; i++) {
            numbers[i].style.background = "#9e9e9e";
            if (x == i) {
                numbers[i].style.background = "#fff";
            }
        }
    }

    left.onclick = function () {
        add = add - 1;
        if (add < 1) {
            add = 6;
        }
        image.src = "./images/ad0" + add + ".jpg";
        var x = add - 1;
        for (var i = 0; i < len; i++) {
            numbers[i].style.background = "#9e9e9e";
            if (x == i) {
                numbers[i].style.background = "#fff";
            }
        }
    }
    for (var i = 0; i < len; i++) {
        numbers[i].onmouseover = function () {
            add = this.innerHTML;
            image.src = "./images/ad0" + add + ".jpg";
            var x = add - 1;
            for (var i = 0; i < len; i++) {
                numbers[i].style.background = "#9e9e9e";
                if (x == i) {
                    numbers[i].style.background = "#fff";
                }
            }
        }
    }
    function lunbo() {
        lun = setInterval(function () {
            add = add + 1;
            if (add > 6) {
                add = 1;
            }
            image.src = "./images/ad0" + add + ".jpg";
            var x = add - 1;
            for (var i = 0; i < len; i++) {
                numbers[i].style.background = "#9e9e9e";
                if (x == i) {
                    numbers[i].style.background = "#fff";
                }
            }
        }, 3000)
    }
</script>

</html>