css.h5自动/手动轮播图课后作业

最新推荐文章于 2024-10-15 13:31:06 发布

Māple枫树

最新推荐文章于 2024-10-15 13:31:06 发布

阅读量148

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_51967087/article/details/126527997

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        padding: 0px;
        margin: 0px;
    }

    li {
        display: inline-block;
        border: black 1px solid;
        width: 50px;
        height: 50px;
        text-align: center;
        font-size: 25px;
        background-color: white;
        text-decoration: none;
        line-height: 52px;
        border-radius: 50px;
        opacity: 0.7;
    }

    .b {
        position: absolute;
        top: 120px;
        left: 155px;
    }

    li:hover {

    }


</style>

<body>

<div style="width: 550px ;border: red 1px solid" id="qq" onmouseover="ting() " onmouseout="dong()">
    <img src="img/dd_scroll_1.jpg" id="q" >
    <div class="b">
        <ul>
            <li id="li1" onmouseover="yuan(this)">1</li>
            <li id="li2" onmouseover="yuan(this)">2</li>
            <li id="li3" onmouseover="yuan(this)">3</li>
            <li id="li4" onmouseover="yuan(this)">4</li>
            <li id="li5" onmouseover="yuan(this)">5</li>
            <li id="li6" onmouseover="yuan(this)">6</li>
        </ul>
    </div>
</div>
</body>
<script>
    var sum = 1;

    var qq = document.getElementById("q");
    var bb = setInterval(a, 900);

    function a() {



        if (sum > 6) {
            sum = 1;
        }
        qq.src = "img/dd_scroll_" + sum + ".jpg";

        ys();
       var li =  document.getElementById("li"+sum);
        li.style.backgroundColor = "greenyellow";
        sum++;
    }

    //所有的li变白色
    function ys() {
      var lis =   document.getElementsByTagName("li");
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.backgroundColor = "white";
        }

    }

    function ting() {
        clearInterval(bb);
    }

    function dong() {
        //alert("aaaaaaaaaaa")
        bb = setInterval(a, 900);
    }


    function yuan(li) {
        var count = li.innerHTML;

        var img = document.getElementById("q");
        img.src = "img/dd_scroll_" + count + ".jpg";

        ys();
        //切换图片的时候小点的背景也切换
        var li = document.getElementById("li" + count);
        li.style.backgroundColor = "greenyellow";
    }


</script>
</html>