轮播图的制作

最新推荐文章于 2024-06-26 13:55:41 发布

s_psycho

最新推荐文章于 2024-06-26 13:55:41 发布

阅读量270

点赞数

本文链接：https://blog.csdn.net/weixin_42413689/article/details/80924307

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
            list-style: none;
        }
        .big{
            width: 440px;
            height: 275px;
            border: solid;
            margin: 100px auto;
            position: relative;
        }
    .left{
        width: 40px;
        height: 70px;
        background-image: url("img/left.png");
        position: absolute;
        top:110px;
        left:0px;
        background-position: 57px -35px;
        cursor: pointer;
    }
        .right{
            width: 40px;
            height: 70px;
            background-image: url("img/right.png");
            position: absolute;
            right: 0px;
            top:110px;
            background-position: 57px -35px;
            cursor: pointer;
        }
        li{
            width: 20px;
            height: 20px;
            border: solid 1px;
            border-radius: 50%;
            float: left;
            line-height:20px;
            text-align: center;
            cursor: pointer;
        }
        ul{
            width: 150px;
            height: 40px;
            position: absolute;
            bottom: -20px;
            left: 190px;
        }
        img{
            display: none;
        }
        .act{
            display: block;
        }
        .active{
            background: red;
        }
    </style>
</head>
<body>
<div id="box"class="big">
    <img src="img/4.jpg" alt="" class="act">
    <img src="img/5.jpg" alt="">
    <img src="img/6.jpg" alt="">
    <img src="img/7.jpg" alt="">
    <div id="left" class="left"></div>
    <div id="right" class="right"></div>
    <ul>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        window.onload=function () {
            var arrLi=document.getElementsByTagName("li");
            var arrImg=document.getElementsByTagName("img");
            var oLeft=document.getElementById('left');
            var oRight=document.getElementById('right');
            var oBox=document.getElementById("box");
            var num=0;
            b=setInterval(a ,1000);
            oBox.onmouseover=function () {
                clearInterval(b)
            };
            oBox.onmouseout=function () {
                b=setInterval(a ,1000);
            }
            for (x=0;x<arrLi.length;x++){
                arrLi[x].index=x;
                arrLi[x].onmouseover=function () {
                    for (j=0;j<arrLi.length;j++){
                    arrLi[j].className="";
                     arrImg[j].className=''
                }
                    this.className="active";
                    arrImg[this.index].className='act'
                }
                }
                oLeft.onclick=function () {
                    num=num-1;
                    if(num<0){
                        num=arrImg.length-1
                    }
                    for (j=0;j<arrImg.length;j++){
                        arrImg[j].className=""
                        arrLi[j].className=""
                    }arrImg[num].className="act"
                    arrLi[num].className="active"
                }
            oRight.onclick=a;
                    function a() {
                num=num+1;
                if(num>arrImg.length-1){
                    num=0
                }
                for (j=0;j<arrImg.length;j++){
                    arrImg[j].className="";
                    arrLi[j].className=""
                }arrImg[num].className="act";
                arrLi[num].className="active"
            }
        }
    </script>
</div>
</body>
</html>